06实战:如何通过 ref 实现组件的子传父、父传子的交互(实例演示)?

Ⅰ、组件交互问题:

1、组件交互:

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

2、基于 ref 的父子交互:

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

Ⅱ、demo 简介:

1、文件结构:

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

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

其三、父组件为:parentComponent,其页面结构为:

在这里插入图片描述

其四、子组件为:Subassembly,其页面结构为:

猜你喜欢

转载自blog.csdn.net/weixin_43405300/article/details/126822688