vue3.0的 v-model 为啥不好用了？

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue3.0 的beta版出来后就想尝个鲜，顺便实现以下我的想法，于是开整。前面各种折腾就不说了。开始弄自定义组件。

自定义了一个input，但是按照vue2.X的方式设置v-model的时候居然不好用了，各种检查代码没问题。只好先改成属性+事件监听的方式，但是这也不方便呀，于是开始各种查资料。

新鲜事物资料特别少，查了半天也没弄明白，有说不支持了，有说改写法了，各种尝试还是不好使。又找到一个原版英文资料，似乎要加冒号，但是冒号后面怎么写不知道，好吧是我英文太烂看不懂。

直到在B站找到了一个视频，终于解决了问题。vue3.0的v-model的变化

vue2.0的v-model

emmmm，算了不写了，大家都知道。如果不清楚的话，可以看上面的连接。

vue3.0 的v-model的写法

2.0想要支持多属性的话，需要使用.sync。

3.0为了让自定义组件可以更好的支持多个属性（可能吧），做了一点点修改，去掉了.sync，给v-model加了个冒号。

v-model:name="name" v-model:age="age"

冒号后面是内部组件的属性的名称，后面跟的是实体类的属性。而组件内部的事件要改一下。

this.$emit('update:name', event.target.value)

每一个dom写一个input事件，设定好属性名称。

如果我的组件只有一个属性怎么办，还要写冒号吗？当然不需要，vue怎么会增加我们的麻烦呢。只需要设置默认属性名就行。

内部组件使用 modelValue 作为属性名称，外部就可以像vue2.0那样使用v-model了

内部组件

 <input type="text" :value="modelValue" @input="textInput" >

export default {
  name: 'nf-form-input',
  props: {
    modelValue: String,
    meta: Object
  },
  methods: {
    textInput: function (e) {
      this.$emit('update:modelValue', event.target.value)
    }
  }
}

外部调用

<nfInput v-model="name" /> {{title}}

vue 3.0 beta 测试通过

one more thing

基础问题搞定了，可以开始我的文档驱动系列了。

以上是 vue3.0的 v-model 为啥不好用了？ 的全部内容， 来源链接： utcz.com/z/379919.html

回到顶部