vue(2/3)中在组件上使用v-model

v-model一般用于表单数据的双向绑定，使用起来也很方便，但是本质上他还是一个语法糖，先拿input输入框举个例子

自定义一个MyInput组件

创建一个父组件，导入并注册MyInput组件

看结果

Snipaste_2021-11-27_19-53-19.png

这样我们就实现了一个v-model，本质上就是为input元素的value属性进行数据绑定，然后通过一个input事件将当前文本框的内容发送给父组件，父组件监听一个input事件，将传递过来的值赋值给value，像这样的我们就可以简写成

而在组件上，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

我觉得这句话很重要，以往没有仔细看文档这句话，就形成了一种定向思维，要在组件上使用v-model，组件里面必须含有input等这些表单元素才行，其实是大错特错

当我们要使用v-model的时候，只需要在组件中定义一个value的prop，当组件内部需要修改value的值时，自定义input事件传递给父组件，让父组件修改，这样就不违背单向数据流的思想了，因为数据一般都是响应式的嘛

下面举个五星评分组件的例子，就不写的那么完整了，星星用方块代替，点击方块进行评分，并且设置v-model绑定的值是当前评分(就是几颗星)，类型是number

• rate.vue

• 使用组件

效果，目前应该是两颗星是黄色

init.png

下面来写点击逻辑，其实就一行

点击之后，定义一个input事件，参数就是item，父组件就会监听子组件的input事件，将你绑定的值（rate）变成input事件的参数（item），然后数据是响应式的，对应的之就会被修改（变成黄色的星星的数量对应发生变化）

大家也可以看对应的官网

vue3在组件上使用v-model

vue3在组件上的用法发生了变化

value -> modelValue
input -> update:modeVale

那么上面的例子中

就等价于

那么Rate.vue内部就该是

...
props: {
  modelValue: Number,
}
...

那么input那些表单元素的绑定本质就是

• 多值双向绑定
  一般来说v-model绑定的就是modelValue，如果你想绑定多个或者绑定其他属性，那就可以给v-model添加参数

v-model:(属性)="(为该属性绑定的值)"
// 当然这个属性应该是子组件的一个prop，且触发方法同v-model，
$emit('update:属性', (参数))

这个是可以和v-model同时存在的

- 子组件

- 使用

效果就是，点击子组件的文字，两边的文字内容同时修改

Snipaste_2021-11-27_21-20-21.png

|
|

1.png

3.x官网链接：

• v-model
• v-model参数