Vue3的v-model區別：
1. `v-model`prop 和事件默認名稱已更改：
* prop：`value`->`modelValue`；
* 事件：`input`\->`update:modelValue`；
2. * **移除**`.sync`修飾符和組件的`model`選項
3. * **新增**：現在可以在同一個組件上使用多個`v-model`綁定；
4. * **新增**：現在可以自定義`v-model`修飾符。
>[info] 在 Vue2 中，在組件上使用`v-model`相當于綁定`value`prop 并觸發`input`事件：
~~~
<ChildComponent v-model="pageTitle" />
//以下是簡寫:
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
~~~
>[info] 在 vue3 中，自定義組件上的`v-model`相當于傳遞了`modelValue`prop 并接收拋出的`update:modelValue`事件：
~~~
<ChildComponent v-model="pageTitle" />
//以下是簡寫:
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
~~~
## `v-model`參數
若需要更改`model`的名稱，現在我們可以為`v-model`傳遞一個*參數*，以作為組件內`model`選項的替代：
~~~
<ChildComponent v-model:title="pageTitle" />
//以下是簡寫:
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
~~~
## 允許同時使用多個`v-model`
~~~
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
//以下是簡寫:
<ChildComponent
:title="pageTitle"
@update:title="pageTitle = $event"
:content="pageContent"
@update:content="pageContent = $event"
/>
~~~
## `v-model`自定義修飾符
除了像`.trim`這樣的 vue2 硬編碼的`v-model`修飾符外，現在 vue3 還支持自定義修飾符：
~~~
<ChildComponent v-model.capitalize="pageTitle" />
~~~
### 創建自定義修飾符`capitalize`案例：
自定義修飾符會通過`modelModifiers`傳遞給組件prop。在組件的`created`生命周期中`modelModifiers`會包含自定義修飾符`capitalize`，且值為true。
~~~
//capitalize是自定義修飾符
<my-component v-model.capitalize="myText"></my-component
~~~
~~~
app.component('my-component', {
props: {
modelValue: String,
//傳遞的自定義修飾符會在這個prop中
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
template: `
<input type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)">
`,
created() {
//獲取傳遞的自定義修飾符
console.log(this.modelModifiers) // { capitalize: true }
}
})
~~~
### 對于帶參數的`v-model`綁定，生成的 prop 名稱將為`arg + "Modifiers"`：
~~~
<my-component v-model:description.capitalize="myText"></my-component>
~~~
~~~
app.component('my-component', {
//v-model:description.capitalize descriptionModifiers 是自定義修飾符接收參數
props: ['description', 'descriptionModifiers'],
emits: ['update:description'],
template: `
<input type="text"
:value="description"
@input="$emit('update:description', $event.target.value)">
`,
created() {
console.log(this.descriptionModifiers) // { capitalize: true }
}
})
~~~
### 實現自定義修飾符`capitalize`的功能，給輸入的值第一個變大寫：
~~~
<div id="app">
<my-component v-model.capitalize="myText"></my-component>
{{ myText }}
</div>
const app = Vue.createApp({
data() {
return {
myText: ''
}
}
})
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
methods: {
emitValue(e) {
let value = e.target.value
//如果傳遞了capitalize修飾符，處理值第一個變為大寫
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
},
template: `<input
type="text"
:value="modelValue"
@input="emitValue">`
})
app.mount('#app')
~~~
