Vue3 v-model 组件中的使用

当我们需要自己封装一个组件的时候 我们再组件上使用v-model

<home v-model="name"></home>
HTML

相当于

<home :modelValue="name" @update:modelValue="name=$event"></home>
HTML

当然组件中需要将modelValue绑定到props中， 同时定义自定义事件抛出

一般写法如下：

<input type="text" :value="modelValue" @input="inputChange">
HTML
props:["modelValue"],
emits:["update:modelValue"],
methods:{
   inputChange(event) {
     this.$emit("update:modelValue", event.target.value);  
   }   
}
Js

我们可以发现input上的写法其实和v-model类似，但是我们不能直接将modelValue绑定

<input type="text" v-model="modelValue">
HTML

上述的写法会有问题，并不能和父组件双向绑定，而且我们也尽量不直接修改props中的值

computed 写法如下：

需要一个新的值来绑定 这里就命名为value

<input type="text" v-model="value">
HTML
    computed:{
      value:{
         //在设置值的发出一个自定义事件
        set(value) {
          this.$emit("update:modelValue", value)
        },
        get() {
          return this.modelValue  
        }
      }
    },
Js

另外vue3 组件也可以设置多个 v-model 了(vue2是.sync)， 默认的 v-model会命名为modelValu 我们可以通过v-model:xxx 来自己命名， 但是要注意事件取名格式为 @update:xxx

Last modification：July 20, 2021
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏