刘贵学博客

夯实Vue系列 Demo **3 父子组件双向通讯:V-model

我们在Demo1和 Demo2 分别介绍了父子间的通讯原理:
* 父 -> 子:Props
* 子 -> 父:Emit

本例将二者综合在一起,实现双向通讯,也就是其他框架所说的【双向绑定】,当然通讯原理还是和我们上面 Demo1 和 Demo2一致的。

业务场景

我们需要实现一个 折叠面板,如下图所示:

  1. 如不勾选,此模块的详情将隐藏;
  2. 如勾选,此模块的详情将显示;
  3. 每个模块的勾选状态需要父组件传入,并允许更改;

实现(父->子)

代码解析:

  1. 左侧是 父组件(Parent),两次调用 Panel 展示 模块A 与模块B
  2. 红色圈中是 Panel中 添加一个 isShow的属性;
  3. Parent中分别 将变量 showA, showB 传入 Panel

已经能实现【业务场景】中的所有效果,但是,当切换勾选时,浏览器会抛出警告:

意思是,不要在子组件内修改 父组件传入的props。

那我们修改一下:

实现(子->父)

代码解析:

  1. 右侧的 子组件 Panel 新加了 一个计算属性my_show,当子组件触发其修改的时候,会调用 set 函数,$emit 一个input事件给父组件;

注: 为了方便,Panel组件的 isshow 属性 修改为 value了。

  1. 父组件内的 Panel A 与 B 分别使用了两种方式来接受 input 事件。其实v-model只是一个语法糖,将input事件固定关联 value属性的修改:

v-model是否可以绑定多个元素呢?

可以的,传入对象即可,如下:

1. Parent.vue

2. 子组件 Panel.vue

检测到obj内的成员变化,发送input事件给父组件。

代码实现

参考 https://coding.net/u/guixue/p/vue-starter/git

![](media/14952939575744/14957046058782.jpg)