锐客网

  1. 首页 > 睿知 > it技术 > >

vue3自定义组件之v-model实现父子组件双向绑定

vue3 v-model父子组件双向绑定 vue3.x移除了vue2.x的model选项，自定义组件双向绑定不在使用以下方法：

// vue2的v-model双向绑定方法model: {prop: 'value', //3.x默认值改为了modelValueevent: 'input' //3.x默认值改为了update:modelValue},//使用 this.$emit('input', index);

vue3.x采用以下方式（v-model默认对应的prop值是modelValue）
父组件：

子组件：

vue3.x可以绑定多个v-model
父组件：

子组件：

vue3.x去掉了v-model的.sync修饰符
其他的比如.trim依然可以使用，新增自定义修饰符
父组件

【vue3自定义组件之v-model实现父子组件双向绑定】子组件


vue3 v-model使用(多个 v-model 绑定)
//父组件setup(props) { const msg = ref("msg"); const foo = ref('123') return{ foo,msg }}

    推荐阅读


    上一篇：Android实现简单手机震动效果

    下一篇：vue3父组件和子组件如何传值实例详解