model在vue里面实现双向绑定。通过父节点向子节点传递参数。子节点通过操作再回传给父节点的变量。有点像prop和emit调用父类方法,并且把参数传递过去,通过父类修改变量,从而修改子类里面的prop值的参数。
v-model通过双向绑定,可以不用父类自己定义修改参数的方法。直接在子类里面调用指定的方法就可以了。vue3的用法和vue2里面的model使用方式差不多,但是还有点差距。
父节点:
<ChildComponent v-model="pageTitle" />
// ChildComponent.vue
import Vue, { defineComponent } from 'vue'
export default defineComponent ({
model: {
modelValue: String // 以前是`value:String`
},
meits: ['update:modelValue'], // 这块我自己测试,可以省略,也能调用,但是会有警告,还是加上比较好一些。这也是vue3上面新加的。
methos: {
changePageTitle(title) {
this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
}
}
})
这样的话,就可以实现一个双向绑定。
备注: 在vue3里面,有一个setup方法,可以定义变量,父节点传递的数据不要在setup里面定义,要放到data里面,否则,不能实现绑定。
vue3里面,可以自定义变量名
父节点:
<ChildComponent v-model:title="pageTitle" /> // 在v-model:自定义变量名称
// ChildComponent.vue
import Vue, { defineComponent } from 'vue'
export default defineComponent ({
model: {
prop: 'title', // 以前是`value:String`
},
meits: ['update:title'], // 这块我自己测试,可以省略,也能调用,但是会有警告,还是加上比较好一些。这也是vue3上面新加的。
methos: {
changePageTitle(title) {
this.$emit('update:title', title) // 以前是 `this.$emit('input', title)`
}
}
})
就可以实现了。
注意,emit方法的格式是 update:变量名称,我改过格式,貌似没有作用。这个貌似就是这个格式需要注意一下。
除此之外,vue3还可以绑定多个变量,这个有待验证。
上面的内容参考官网文档:https://v3.cn.vuejs.org/guide/migration/v-model.html#%E6%A6%82%E8%A7%88