组件使用 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" />' 可以绑定多个目的就是一个语法糖的省略用法，更多的详细案例'https://www.kancloud.cn/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)` } } } ~~~