Vue3中使用v-model实现组件通信

v-model也是我们组件通信的一种方式

虽然, 在我们平常的开发中, 很少往组件身上写v-model, 但是呢, 我们经常使用的UI组件库, 底层是大量使用v-model进行通信的

我们应该还记着el-input上面是可以使用v-model进行双向绑定的

在用v-model进行组件通信之前, 我们先搞懂v-model的底层实现

我们先来定义一个响应式数据

我们看看页面呈现和数据绑定

v-model的底层实现其实是这样的

动态value值配合input事件实现我们的双向绑定

这里, 飘红了, 我们可以这样处理

上述的写法都是将v-model用于html标签上, 下面, 我们将v-model用于组件标签身上

我们先要准备一个组件

现在我们给组件加上v-model是不是也会和el-input一样实现双向绑定呢?

我们发现其实并不然

所以, 这里需要采用动态value和input事件了, 这个是Vue2的实现办法

那么, 我们现在使用的是Vue3, 怎么实现呢?

现在, 我们不是将name传递过去了吗

我们在这个input组件中接收, 并使用即可

这样, 我们的单向绑定就实现了

那我再输入点东西, 好像数据没有变化

那肯定不行, 这时候, 就需要再使用一个编译宏进行接收

现在, 再输入字段, 数据也会随之变化

所以, 我们使用v-model进行组件通信也是可以的

我们把飘红解决一下

但是呢, 我们给input组件绑定的使用, 并没有使用v-model啊

这样, 我们的v-model组件通信才算真正的讲解完了

我们上面的代码, 其实是等价于下面的注释代码的

v-model升级写法

我们发现组件上使用了v-model, 它会帮助我们转换成

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

所以, 我们props接收也得采用这个名字, emits名字也是固定的

所以, 这个升级写法, 就是更改value名字

接下来, 我们就是改组件内部接收了

这样, 看起来是不是简单多了

那既然我们可以更改value的值, 那么我们是不是可以写很多个v-model

那当然是可以的

这样, 我们的v-model升级写法才算说完啦

今天, 我们就讲解到这里

我们下期见

原文始发于微信公众号（一个不正经的黑客）：Vue3中使用v-model实现组件通信