組件使用 v-model -- 非兼容 · vue3.x -- 系列學習

>[success] # v-model ~~~ 1.'非兼容'：用于自定義組件時，v-model prop 和事件默認名稱已更改： 1.1.'prop'：value -> modelValue； 1.2.'event'：input -> update:modelValue； 2.'非兼容'：v-bind 的 .sync 修飾符和組件的 model 選項已移除，可用 v-model 作為代替； 3.'新增'：現在可以在同一個組件上使用多個 v-model 進行雙向綁定； 4.'新增'：現在可以自定義 v-model 修飾符。 ~~~ >[info] ## v-model 非組件基礎使用 ~~~ 1.'v-model' 指令在表單 '<input>、<textarea> 及 <select>' 元素上創建雙向數據綁定,但 v-model 本質是語法糖 <input v-model="searchText" /> 這種寫法等同于 <input :value="searchText" @input="searchText = $event.target.value" /> ~~~ >[info] ## Vue2.x ~~~ 1.'v-model' 是語法糖，因此在組件上使用也是同樣的，在組件父子值傳遞往往需要在使用的時候定義事件和 props, '<ChildComponent :value="pageTitle" @input="pageTitle = $event" />' 可以簡寫 '<ChildComponent v-model="pageTitle" />' 當然Vue 也提供了屬性'model' 可以自定義屬性不再限制于'value 和 input' // ChildComponent.vue export default { model: { prop: 'title', event: 'change' }, props: { // 這將允許 `value` 屬性用于其他用途 value: String, // 使用 `title` 代替 `value` 作為 model 的 prop title: { type: String, default: 'Default title' } } } 但是v-model 最大的問題只能作用一次及不會出現以下情況 '<ChildComponent v-model="pageTitle" v-model="pageContent"/>' 這時候出現了'.sync' 修飾符來解決這類問題'<ChildComponent :title.sync="pageTitle" />' 可以綁定多個目的就是一個語法糖的省略用法，更多的詳細案例'http://www.hmoore.net/cyyspring/vuejs/1108931' ~~~ >[info] ## 3.x ~~~ 1.來看'3.x','v-model'在'2.x' 的弊端'v-model' 只能在組件使用一次，并且如果想實現類似效果使用多次需要 '.sync' 來定義使用這個語法糖，本質上'v-model 和sync'在組建上做了類似的語法功能，在'3.x'將'.sync' 移除,為了讓組件可以使用多個'v-model' 也從原來'value 和input'變成了'modelValue 和 update:modelValue' ~~~ >[danger] ##### 簡版的先消化理解 ~~~js 1.在組件使用'<ChildComponent v-model="pageTitle" />' 是下面的簡寫 <custom-input :modelValue="searchText" @update:modelValue="searchText = $event" /> 來分析組件props 需要有一個'modelValue' ,組件的事件 $emit 需要有一個'update:modelValue'組件寫法 app.component('custom-input', { props: ['modelValue'], emits: ['update:modelValue'], template: ` <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" > ` }) 2.v-model 可以定義多個寫法'<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />' 是一下的簡寫 <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" :content="pageContent" @update:content="pageContent = $event" /> 就是說明你的 props 定義['title','content']，對應的$emits定義['update:title'.'update:content'],事件綁定觸發$emits 就看項目需要可以是'input、change、input' ~~~ >[danger] ##### 使用 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>  <div id="app"> {{searchText}} <custom-input v-model="searchText"></custom-input> </div> <script src="https://unpkg.com/vue@next"></script> <script> const {createApp} = Vue const app = createApp({ data(){ return { searchText:'11' } }, methods:{ fontSize(){ console.log("1") } }, }) app.component('custom-input', { props: ['modelValue'], emits: ['update:modelValue'], template: ` <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" > ` }) app.mount('#app') </script> </body> </html> ~~~ >[danger] ##### 上面的案例官方給的另一種思路 ~~~ 1.使用計算屬性利用get 方法應返回 modelValue property，或用于綁定的任何 property， set 方法應為該 property 觸發相應的 $emit。 ~~~ ~~~ app.component('custom-input', { props: ['modelValue'], emits: ['update:modelValue'], template: ` <input v-model="value"> `, computed: { value: { get() { return this.modelValue }, set(value) { this.$emit('update:modelValue', value) } } } }) ~~~ >[info] ## 官方給的遷移策略我們推薦： * 檢查你的代碼庫中所有使用`.sync`的部分并將其替換為`v-model`： ~~~ <ChildComponent :title.sync="pageTitle" />  <ChildComponent v-model:title="pageTitle" /> ~~~ * 對于所有不帶參數的`v-model`，請確保分別將 prop 和 event 命名更改為`modelValue`和`update:modelValue` ~~~ <ChildComponent v-model="pageTitle" /> ~~~ ~~~ // ChildComponent.vue export default { props: { modelValue: String // 以前是`value：String` }, emits: ['update:modelValue'], methods: { changePageTitle(title) { this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)` } } } ~~~