[JavaScript知识库]06实战：如何通过 ref 实现组件的子传父、父传子的交互(实例演示)？

Ⅰ、组件交互问题：

1、组件交互：

众所周知，基于 vue 的组件就是单文件组件开发，那么就涉及组件之间的交互问题；
大多的组件交互的问题可以分几个模块：
子传父、父传子、兄弟之间传参；

2、基于 ref 的父子交互：

ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上;
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例;

Ⅱ、demo 简介：

1、文件结构：

其一、用 vue-cli 创建一个项目；

其二、布置好路由和引入 Element-ui 的组件；

其三、父组件为：parentComponent，其页面结构为：

其四、子组件为：Subassembly，其页面结构为：

了解本专栏 订阅专栏 解锁全文 超级会员免费看