vue3.0的 v-model 为啥很差用了？

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了

内部组件

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

外部调用

{{title}}

vue 3.0 beta 测试经过

one more thing

基础问题搞定了，能够开始个人文档驱动系列了。