vue 3中的v-model双向绑定相对于vue 2的改变

最近学习vue组件库的开发,在做input组件的时候,发现现在vue 3 中v-model的双向绑定和vue 2 的实现有所不同了,特地记录一下,具体可以参考官方教程:官方文档

图片[1]-vue 3中的v-model双向绑定相对于vue 2的改变-北忘山博客

下面以input组件为例,做个简单的演示,记录下理解

vue 2的双向绑定

在父组件中

<input v-model="name" />

其实,一个v-dodel就是下面的语句:

<input :value="name" @input = "target.$event" />

而通常在子组件中,只需要做下面的这件事就可以实现双向绑定

 methods: {
    changeName(name) {
      this.$emit('input', name)
    }
  }

vue 3的双向绑定

在父组件中

<input v-model="name" />
​
<!-- 是以下的简写: -->
<input :modelValue="name" @update:modelValue="target.$event" />

但是这里还有一种写法,就是具体指明model的具体内容

<input v-model:name="name" />
​
<!-- 是以下的简写: -->
<input :name="name" @update:name="target.$event" />

两种不同的写法实现双向绑定也有点点区别

<!-- <input v-model="name" />的写法 -->
emits: ['update:modelValue'],
  methods: {
    changeName(name) {
      this.$emit('update:modelValue', name) // 以前是 `this.$emit('input', name)`
    }
  }
​
<!-- <input v-model:name="name" />的写法 -->
emits: ['update:name'],
  methods: {
    changeName(name) {
      this.$emit('update:name', name) // 以前是 `this.$emit('input', name)`
    }
  }

这里同时使用 emits进行注册emit事件,和 prop 类似,现在可以通过 emits 选项来定义组件可触发的事件,不添加的话,会触发两次。具体教程可以参考官方文档

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容