Vue: Peningkatan API untuk komponen UI, mengurangi boilerplate untuk meneruskan atribut dan peristiwa

Hmm, saya tidak tahu tentang itu tetapi untuk komponen seperti itu saya pikir Anda bisa menggunakan JSX atau createElement untuk menyebarkan alat peraga.

https://github.com/doximity/vue-genome

Bagi kami ini akan menjadi luar biasa. Kami membungkus semua input dalam label untuk keperluan styling dan ux. Saya setuju bahwa kita bisa drop down ke jsx tetapi template jauh lebih mudah untuk diikuti semua orang.

@Austio , sayangnya, itu adalah pengembalian untuk template... tunggu... mungkin kita bisa memikirkan cara untuk spread props ke dalam template vue?

Saya suka fitur ini secara pribadi. Tetapi tampaknya merusak konsistensi perilaku v-bind, seperti kadang-kadang saya masih perlu mengikat properti class untuk elemen root.

Jadi bagaimana kalau menggunakan sepasang arahan sebagai pengambil dan penyetel seperti:

Di dalam komponen, tentukan jangkar v-expose :

<input v-expose="foo" />

Saat menggunakannya:

<the-component v-define:foo="{propA: '', propB: ''}"></the-component>

<!-- or maybe use v-bind for it directly -->
<the-component :foo="{propA: '', propB: ''}"></the-component>

@jkzing , itu terlihat luar biasa, tetapi sekali lagi, itu terlihat seperti spread dasar dan dengan potensi masalah seperti bagaimana Anda mendefinisikan @keyup.enter.prevent="myAction" ?

Anda tidak bisa hanya <the-component :foo="{'@keyup.enter.prevent': myAction}"></the-component> , itu berarti Anda harus menyimpan semua pengubah seperti enter dan prevent di runtime (yang merupakan bagian dari vue-template-compiler ATM)

@nickmessing

yang terlihat seperti spread dasar

Hal yang kita bicarakan adalah membawa sesuatu seperti spread untuk pengguna template

<the-component :foo="{'@keyup.enter.prevent': myAction}"></the-component>

@ adalah v-on shortland, bukan berarti prop (v-bind).

@jkzing , di tautan dari deskripsi ada banyak v-on binding juga

@nickmessing Um... Adapun v-on binding, itu adalah topik IMO lain, seperti gelembung acara. 🤔

@jkzing , itulah konsep keseluruhan dari v-expose afaik, untuk membuat semua properti "pergi" ke elemen tertentu dalam komponen

@nickmessing , Tidak yakin tentang proposal asli, tetapi saya tidak berpikir pendengar acara harus dianggap sebagai attribute .

@jkzing , mungkin tidak, tetapi mengingat contoh umum dari <my-awesome-text-input /> mana Anda dapat memiliki >9000 props berbeda, Anda hanya ingin semuanya sampai ke <input /> yang ada di dalam komponen kustom Anda tanpa banyak dari kode.

Saya pribadi menggunakan v-bind="$props" atau Anda dapat memfilternya untuk mengecualikan properti yang tidak ingin Anda terapkan. Dengan cara ini Anda dapat menerapkan beberapa alat peraga sekaligus pada input. Memang v-expose mungkin berguna karena untuk komponen pembungkus seperti input Anda harus menentukan semua props html itu

Jadi ini
https://github.com/almino/semantic-ui-vue2/blob/master/src/elements/Input.vue#L9
tebu dikurangi menjadi v-bind="$props" atau v-bind="filteredProps" mana filteredProps mungkin merupakan beberapa properti yang dihitung

@cristijora Kami juga menggunakan v-bind="someProps" . Masalah dengan solusi ini adalah properti yang berlebihan akan ditambahkan sebagai atribut HTML. Akan sangat bagus jika v-bind= dapat memfilter semua properti yang tidak diterima oleh komponen. Dengan <component> dinamis kita tidak tahu props mana yang harus difilter di properti yang dihitung. Meskipun dimungkinkan untuk mengekstrak options.props dan menggunakan lodash._pick .

Apakah ini benar-benar layak dengan arahan?

@posva , saya rasa ini tidak akan berfungsi sebagai arahan, tetapi itu bisa menjadi bagian dari mesin templat vue yang melakukan sesuatu seperti menyebar secara internal + beberapa propagasi acara

@posva Bukan arahan yang dibuat pengguna, saya rasa, jadi saya mungkin menggunakan bahasa yang salah. Yang saya maksud hanyalah "atribut khusus".

@chrisvfritz apakah Anda memiliki pemikiran tentang API untuk bagaimana itu akan digunakan (menentukan apa yang akan diekspos dan bagaimana menambahkannya ke anak)

Saya bisa melihat ini serupa digunakan untuk memberikan/menyuntikkan konsep.

@Austio Saya mungkin tidak memahami pertanyaannya, tetapi saya memberikan beberapa pemikiran tentang API di posting asli.

Hei Chris, berarti pemikiran tambahan tentang penggunaan serupa untuk memberikan suntikan di mana Anda menyatakan apa yang dapat diekspos pada orang tua dan kemudian menggunakannya pada anak.

Aku mengerti. Saya tidak yakin ada kebutuhan untuk itu. Informasi sudah dapat diteruskan melalui alat peraga dan slot - dan bahkan properti pribadi pada induknya dapat diakses dengan this.$parent , meskipun saya pikir yang terbaik adalah menghindari pola itu.

@Austio Apakah ada kasus penggunaan tertentu yang Anda pikirkan?

@chrisvfritz bagaimana cara kerjanya di fungsi render?

Saya pikir mungkin akan lebih baik untuk:

• memberikan opsi untuk menonaktifkan pewarisan otomatis atribut untuk simpul akar
• mengekspos atribut tersebut sebagai $attributes , misalnya (menamai tbd)
• gunakan v-bind untuk menambahkannya di mana pun Anda suka, seperti yang telah kami tunjukkan dengan $props :

v-bind="$attributes"

Itu akan memiliki manfaat tambahan dari bekerja secara praktis identik dalam fungsi JSX/render

@LinusBorg Saya suka cara Anda berpikir. Cara Anda jauh lebih intuitif.

Sebagai catatan tambahan, saya pikir dengan adanya API ini, versi utama Vue berikutnya bahkan dapat menghapus pewarisan otomatis atribut secara bersamaan, sehingga komunikasi lintas komponen dapat tetap eksplisit di kedua sisi.

Dimungkinkan untuk mendepresiasi atau menghapus perilaku ini, ya.

Jika itu sepadan, perubahan yang mungkin diperlukan pada banyak komponen di lib, dll. harus diputuskan dan harus didiskusikan dengan komunitas, terutama penulis koleksi UI.

A tentang fitur prob posed: informasi ini sudah tersedia di komponen fungsional melalui context.data.attributes , jadi fitur ini pada dasarnya akan memberikan fungsionalitas yang identik dengan komponen instan.

Iya benar sekali. Tujuan utama yang ada dalam pikiran saya adalah untuk membuat pekerjaan lebih sederhana bagi penulis komponen UI (baik pihak ke-3 maupun internal). Saat ini ada banyak kasus di mana sesuatu seperti ini diperlukan:

<input
  v-bind:id="id"
  v-bind:accept="accept"
  v-bind:alt="alt"
  v-bind:autocomplete="autocomplete"
  v-bind:autofocus="autofocus"
  v-bind:checked="checked"
  v-bind:dirname="dirname"
  v-bind:disabled="disabled"
  v-bind:form="form"
  v-bind:formaction="formaction"
  v-bind:formenctype="formenctype"
  v-bind:formmethod="formmethod"
  v-bind:formnovalidate="formnovalidate"
  v-bind:formtarget="formtarget"
  v-bind:list="list"
  v-bind:max="max"
  v-bind:maxlength="maxlength"
  v-bind:min="min"
  v-bind:multiple="multiple"
  v-bind:name="name"
  v-bind:pattern="pattern"
  v-bind:placeholder="placeholder"
  v-bind:readonly="readonly"
  v-bind:required="required"
  v-bind:src="src"
  v-bind:step="step"
  v-bind:type="type"
  v-bind:value="value"
  v-on:keydown="emitKeyDown"
  v-on:keypress="emitKeyPress"
  v-on:keyup="emitKeyUp"
  v-on:mouseenter="emitMouseEnter"
  v-on:mouseover="emitMouseOver"
  v-on:mousemove="emitMouseMove"
  v-on:mousedown="emitMouseDown"
  v-on:mouseup="emitMouseUp"
  v-on:click="emitClick"
  v-on:dblclick="emitDoubleClick"
  v-on:wheel="emitWheel"
  v-on:mouseleave="emitMouseLeave"
  v-on:mouseout="emitMouseOut"
  v-on:pointerlockchange="emitPointerLockChange"
  v-on:pointerlockerror="emitPointerLockError"
  v-on:blur="emitBlur"
  v-on:change="emitChange($event.target.value)"
  v-on:contextmenu="emitContextMenu"
  v-on:focus="emitFocus"
  v-on:input="emitInput($event.target.value)"
  v-on:invalid="emitInvalid"
  v-on:reset="emitReset"
  v-on:search="emitSearch"
  v-on:select="emitSelect"
  v-on:submit="emitSubmit"
>

Properti $attributes dapat mempersingkatnya menjadi ini:

<input
  v-bind="$attributes"
  v-on:keydown="emitKeyDown"
  v-on:keypress="emitKeyPress"
  v-on:keyup="emitKeyUp"
  v-on:mouseenter="emitMouseEnter"
  v-on:mouseover="emitMouseOver"
  v-on:mousemove="emitMouseMove"
  v-on:mousedown="emitMouseDown"
  v-on:mouseup="emitMouseUp"
  v-on:click="emitClick"
  v-on:dblclick="emitDoubleClick"
  v-on:wheel="emitWheel"
  v-on:mouseleave="emitMouseLeave"
  v-on:mouseout="emitMouseOut"
  v-on:pointerlockchange="emitPointerLockChange"
  v-on:pointerlockerror="emitPointerLockError"
  v-on:blur="emitBlur"
  v-on:change="emitChange($event.target.value)"
  v-on:contextmenu="emitContextMenu"
  v-on:focus="emitFocus"
  v-on:input="emitInput($event.target.value)"
  v-on:invalid="emitInvalid"
  v-on:reset="emitReset"
  v-on:search="emitSearch"
  v-on:select="emitSelect"
  v-on:submit="emitSubmit"
>

Meskipun kemudian saya kira itu masih bagus untuk memiliki beberapa cara juga mengekspos acara. Mungkin direktif v-on kosong dapat meneruskan semua pendengar acara pada induk ke elemen ini?

<input
  v-bind="$attributes"
  v-on
>

Atau jika ada beberapa masalah yang ingin kami gabungkan, kami mungkin akan kembali ke sesuatu seperti v-expose :

<input v-expose>

Ini telah berubah menjadi diskusi yang lebih luas tentang cara menyederhanakan pembuatan komponen UI, daripada permintaan fitur tertentu, jadi saya akan memberi label ulang masalah ini. 🙂

Aku terlambat untuk topik ini, tapi aku punya beberapa pemikiran juga.

v-bind Solusi & Kerugian Saat Ini

Pertama, saya sudah menggunakan dan menyukai fitur v-bind="propObject" (sangat kuat). Misalnya, bootstrap-vue memiliki komponen tautan internal yang digunakan di mana-mana (tombol, navigasi, daftar dropdown, dll.). Komponen berporos menjadi jangkar asli vs. tautan router berdasarkan href vs. to & keberadaan vm.$router , jadi ada cukup banyak properti yang harus diteruskan secara kondisional ke masing-masing dari komponen-komponen ini.

Solusi kami adalah menempatkan props tersebut dalam mixin dan menggunakan v-bind="linkProps" dengan objek yang dihitung. Ini berfungsi dengan baik, tetapi masih banyak biaya tambahan untuk menambahkan mixin itu ke _semua komponen lain menggunakan komponen tautan_.

v-expose Kemungkinan menggunakan v-bind

Saya pribadi menyukai konsep v-expose , dan mungkin bisa berfungsi seperti slot default + slot bernama, dan kemudian menggunakan pengubah untuk mengakses slot atribut bernama.

Atribut default _"slot"_ akan selalu meneruskan atribut ke komponen itu sendiri (tidak ada perubahan), sementara target bernama lainnya dapat ditentukan oleh komponen. Mungkin sesuatu seperti ini:

<template>
  <my-component 
    <!-- Nothing new here -->
    v-bind="rootProps"
    <!-- This binds the `linkProps` object to the named attribute slot `link` -->
    v-bind.link="linkProps"
  />
</template>

Di dalam MyComponent.vue :

<template>
  <div>
    <router-link v-expose="link" />
  </div>
</template>

Proksi Acara

Saya tidak punya banyak hal untuk ditambahkan di sini, kecuali bahwa .native adalah pengubah yang luar biasa kuat. Memecahkan banyak masalah bagi saya. Tampaknya sebagian besar tidak diketahui oleh pengembang Vue (saya melihat banyak masalah lib UI yang diselesaikan dengan memaparkan pengembang ke fitur ini). Saya menempatkan PR di situs web untuk menambahkan dokumen lebih lanjut dan dukungan pencarian di situs dan berpotensi dioptimalkan untuk pencarian google.

Berasal dari argumen tentang permukaan API di edisi lain, saya harus mengulangi bahwa saya bukan penggemar ide v-expose . itu memperkenalkan "cara kerja" lain, dan tidak berfungsi untuk JSX tanpa juga menerapkan sesuatu yang istimewa di sana, dll.

Satu hal yang saya hormati tentang React people adalah komitmen mereka pada API yang ramping dan menggunakan fitur bahasa sebanyak mungkin. Dalam semangat itu, menggunakan kembali pola yang sudah kita miliki untuk props untuk atribut tampaknya jauh lebih baik daripada memperkenalkan abstraksi lain.

<my-input
  type="file"
  mode="dropdown"
>

<template>
  <div>
    <input v-bind="$attributes">
    <dropdown v-bind="{ ...$props, $attributes.type }"/>
  </div>
</template

Ahh, aku mengerti apa yang kamu katakan sekarang. Dan saya menyukainya! Apakah ini tersedia saat ini? vm.$attributes akan menjadi tambahan bukan?

Membaca ulang komentar Anda. Saya melacak sekarang 👍

Ya, $attributes akan menjadi tambahan.

Selain itu, kita memerlukan opsi untuk mengubah perilaku default saat ini dalam menerapkan atribut ke elemen root, seperti ini:
```html

Ini kemudian bisa menjadi pengaturan default di Vue 3.0 jika kita kemudian memutuskan untuk melakukan ini sehingga menghasilkan perubahan yang melanggar.

@LinusBorg Apa pendapat Anda tentang menangani sisi acara? Untuk mengikuti strategi yang sama, saya kira kita juga bisa menambahkan properti $listeners , yang mungkin terlihat seperti ini:

{
  input: function () { /* ... */ },
  focus: function () { /* ... */ },
  // ...
}

Maka mungkin v-on dapat menerima objek, mirip dengan v-bind . Jadi kita akan memiliki:

<input v-bind="$attributes" v-on="$listeners">

Satu masalah yang saya perkirakan adalah dengan input / change event, karena v-model bekerja sedikit berbeda untuk komponen daripada untuk elemen. Saya juga tidak tahu apakah kita menginginkan keduanya $listeners dan $nativeListeners . Saya kira jika $listeners tersedia, maka pengubah .native mungkin sudah usang.

Juga, mengenai opsi applyComponentAttrsToRoot , mungkin exposeRootEl akan menjadi nama yang baik, yang ketika diatur ke false , dapat menonaktifkan atribut yang diterapkan secara otomatis dan acara .native meneruskan?

Mungkin juga menyenangkan untuk dapat menonaktifkan ini untuk seluruh aplikasi melalui Vue.config , serta untuk satu komponen.

Saya baru-baru ini memiliki ide serupa tentang $listeners - itu juga tersedia pada komponen fungsional melalui

context.data.listeners

Jadi kita akan berakhir dengan $props , $attributes , $listeners yang terdengar baik untuk saya.

Ada juga #5578 meminta sintaks objek v-on="{...}" seperti yang saya gunakan untuk $attributes , itu akan cocok.

Tapi saya tidak yakin tentang pengubah .native. Agar ini berfungsi dengan peristiwa komponen dan pendengar asli, API akan menjadi jauh lebih rumit, dan penggunaannya dipertanyakan, karena pendengar acara asli yang diterapkan ke elemen root masih akan menangkap gelembung peristiwa yang diinginkan, jadi mungkin tidak diperlukan untuk menetapkannya ke elemen tertentu dalam template.

Secara umum, saya akan mengatakan untuk lib komponen tingkat rendah, fungsi render harus lebih disukai ketika template menjadi canggung untuk digunakan. Tetapi saya setuju bahwa yang berikut ini akan berharga:

1. Menonaktifkan perilaku default "penerapan binding otomatis yang tidak ditemukan di properti sebagai atribut ke elemen root" (masalah terkait: haruskah ini memengaruhi ikatan class dan style juga?)

2. mengekspos cara yang lebih mudah untuk "mewarisi" binding eksternal pada komponen ke elemen dalam yang belum tentu root. Idealnya dengan konsistensi antara template dan fungsi render.

ia kie seperti vue, alat sederhana

Hanya ingin mengatakan PR untuk ini di v2.4 luar biasa! 👍

Dari catatan rilis

Menggabungkan ini memungkinkan kita untuk menyederhanakan komponen seperti ini menjadi ini:

<div>
  <input v-bind="$attrs" v-on="$listeners">
</div>

Sepertinya bagus tapi itu tidak sepenuhnya benar, karena komponen semacam ini dirancang untuk bekerja dengan v-model dan sejauh yang saya tahu v-model pada komponen pembungkus tidak berfungsi dengan baik. Apakah ada contoh bagaimana meneruskan v-model dari komponen pembungkus ke input misalnya?
Cara paling sederhana yang saya temukan:
https://jsfiddle.net/60xdxh0h/2/

Mungkin dengan komponen fungsional yang bekerja di sepanjang template akan lebih mudah

komponen semacam ini dirancang untuk bekerja dengan v-model dan sejauh yang saya tahu v-model pada komponen pembungkus tidak berfungsi dengan baik.

Mengapa Anda berpikir demikian? v-model hanyalah gula sintaks untuk prop dan pendengar acara, keduanya akan berada di $attr/$props dan dengan demikian dapat dengan mudah diteruskan.

Saya kira satu-satunya hal yang memerlukan pengetahuan tentang opsi anak adalah jika anak mengubah default model , itu benar.

Tetapi akan mungkin untuk membacanya, tergantung pada situasinya.

Tentu itu adalah gula sintaksis, tapi maksud saya itu bisa membingungkan untuk dibaca

Menggabungkan ini memungkinkan kita untuk menyederhanakan komponen seperti ini menjadi ini:

ketika sebenarnya didasarkan pada contoh https://github.com/almino/semantic-ui-vue2/blob/master/src/elements/Input.vue , Anda tidak bisa begitu saja melewati pendengar secara langsung, untuk mencapai kontrol yang sama. (misalnya: Anda harus menggunakan v-on:input="emitInput($event.target.value)" )

Bagaimanapun, PR ini berharga, kerja bagus!

@AlexandreBonaventure Ini karena v-model bekerja sedikit berbeda pada komponen daripada pada elemen. Peristiwa DOM menyediakan objek peristiwa ke callback, sedangkan peristiwa komponen memberikan nilai secara langsung. Hasilnya adalah v-model _melakukan_ kerja, tetapi nilai terikatnya adalah objek acara DOM. 😕

Saya pikir Anda benar bahwa v-model akan diinginkan untuk bekerja di sini, tetapi saya tidak yakin di mana tempat terbaik untuk menyelesaikannya. Beberapa ide:

Mungkin properti non-enumerable dapat ditambahkan ke $listeners (misalnya __$listeners__: true , untuk membantu v-on mendeteksi penggunaan v-on="$listeners" . Kemudian dalam kasus di mana $listeners objek diteruskan ke v-on , setiap pendengar dapat dibungkus:

function (event) {
  listener(event.target.value)
}

Satu kelemahannya adalah sekarang kita membuang data. Jika seseorang ingin mengakses keyCode , misalnya, mereka kurang beruntung. Namun, jika pengubah didukung untuk sintaks objek v-on , kita dapat memperbaikinya dengan membuat .native menonaktifkan perilaku pembungkusan otomatis.

@yyx990803 @LinusBorg Apa pendapat Anda tentang kelayakan? Adakah kasus tepi yang saya lewatkan?

Oh begitu, Anda mengacu pada v-model di rral. Elemen bentuk, saya memikirkannya tentang komponen.

Anda tidak dapat/tidak boleh menggunakannya pada alat peraga, dengan atau tanpa PR ini. Dan di aplikasi lanjutan, agak jarang menggunakannya (meskipun dapat dicapai).

@LinusBorg Hanya ingin memastikan kita berada di halaman yang sama. Diberikan komponen CustomInput dengan templat ini:

<div>
  <input v-bind="$attrs" v-on="$listeners">
<div>

Anda tidak akan mengharapkan kode di bawah ini berfungsi?

<CustomInput v-model="myValue" />

Saya berharap itu berfungsi - tetapi cara saya memahami alexandre, dia mengacu pada v-model pada elemen, bukan komponen - yang pada akhirnya hanya berfungsi dengan mutasi keadaan lokal.

Saya mencoba mengatakan apa yang dijelaskan @chrisvfritz di posting terakhirnya. (Bahasa Inggris bukan bahasa ibu saya maaf :))

@LinusBorg masalah dengan melakukan ini di rilis terbaru adalah bahwa itu masih dianggap sebagai anti-pola dan memicu peringatan tentang mengubah status.

Sangat berguna untuk membuat hal di atas berfungsi di mana properti value adalah sesuatu selain string. Ambil contoh komponen kombo tempat saya mencoba menggunakan enum yang diimpor dari perpustakaan saya sendiri sebagai nilai untuk opsi tertentu:

<template>
    <select class="combo" v-model="value" v-on="$listeners"> 
      <option v-for="(item, key) in items" :value="item">{{key}}</option>
    </select>
</template>

<script>
export default {
    props: {
        items: {
            type: Object,
            required: true
        },

        value: {}
    }
}
</script>

Ini adalah contoh dari salah satu daftar yang saya gunakan untuk item di induk:

            execList: {
                "None": ACT_EXEC_TYPES.NONE,
                "Function": ACT_EXEC_TYPES.FUNCTION,
                "Code": ACT_EXEC_TYPES.CODE
            }

Dan bagaimana saya menggunakan komponen kombo:

<combo :items="execList" v-model="selectedAction.execType"/>

Saya sudah mencoba membuat ini berfungsi selama 2 hari sekarang dan masih sangat frustrasi. Masalahnya adalah $event.target.value selalu berupa string dan tidak dievaluasi seperti seharusnya di :value .

@LinusBorg @AlexandreBonaventure @RobertBColton saya hanya membuka masalah di mana kita bisa fokus diskusi masa depan masalah ini.