代码改变世界

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

2020-09-04 14:29  金色海洋(jyk)  阅读(1372)  评论(0编辑  收藏

vue3.0还支不支持v-model了?

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

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

2