Ⅰ、组件交互问题：
1、组件交互：
众所周知，基于 vue 的组件就是单文件组件开发，那么就涉及组件之间的交互问题；
大多的组件交互的问题可以分几个模块：
子传父、父传子、兄弟之间传参；
2、基于 ref 的父子交互：
ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上;
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例;
Ⅱ、基于 ref 实现子传父(即：父调子)的实现过程：
1、父调子的方法(methods)：
其一、核心代码：
A、在父组件中引入子组件：
// 在 html 中：
<subassembly></subassembly>
// 在 javascript 中：
import Subassembly from '@/views/Subassembly'
// 在 components 组件中：
components:{
Subassembly
},
B、声明 ref 并调用子组件中的 openDialog 方法：
// 在 html 中添加 ref;
<subassembly ref="subassembly"></subassembly>
// 在 javascript 中 methods 中调用子组件 openDialog 的过程;
addClick() {
this.$refs.subassembly.openDialog()
// 此时的 subassembly 就是 ref 值，而 openDialog 方法就是 Subassembly 子组件中的方法；
// 即：此时触发 addClick 方法就能调用子组件的 openDialog 方法；
},
其二、结果展示：
A、若在子组件中的方法中设置如下：
B、那么在父组件中调用该方法的控制台显示为：
2、父调子的数据(data):
其一、核心代码：
A、在父组件中引入子组件：
// 在 html 中：
<subassembly></subassembly>
// 在 javascript 中：
import Subassembly from '@/views/Subassembly'
// 在 components 组件中：
components:{
Subassembly
},
B、声明 ref 并调用子组件 data 中的 form.name 数据：
// 在 html 中添加 ref;
<subassembly ref="subassembly"></subassembly>
// 在 javascript 中 methods 中调用子组件 data 中 form.name 的过程;
addClick() {
let obj = this.$refs.subassembly.form
console.log(obj);
// 此时的 subassembly 就是 ref 值，而 form 就是 Subassembly 子组件 data 中的对象值；
// 即：此时触发 addClick 方法就能调用子组件 data 中的 form 对象；
},
其二、结果展示：
A、若在子组件中的 data 中设置如下：
B、那么在父组件中调用该 data 的 form 值的控制台显示为：
Ⅲ、基于 ref 实现父传子(即：子调父)的实现过程：
1、子调父的方法(methods)：
其一、核心代码：
A、在父组件中引入子组件：
// 在 html 中：
<subassembly></subassembly>
// 在 javascript 中：
import Subassembly from '@/views/Subassembly'
// 在 components 组件中：
components:{
Subassembly
},
B、声明 @新名称 并调用父组件中的 parentMethod 方法：
// 在 html 中添加 @新名称;
// 注意：此时的 @update 是可以任意取名字的；
<subassembly @update="parentMethods"></subassembly>
// 在 javascript 中 methods 中调用父组件 parentMethods 的过程;
sonMethods() {
this.$emit('update')
// 注意：此时的 update 是要与 @新名称 中的 “新名称” 保持一致；
// 即：此时触发 sonMethods 方法就能调用父组件的 parentMethod 方法；
}
其二、结果展示：
A、若在父组件中的方法中设置如下：
B、那么在子组件中调用该方法的控制台显示为：
2、子调父的数据(data):
其一、核心代码：
A、在父组件中引入子组件：
// 在 html 中：
<subassembly></subassembly>
// 在 javascript 中：
import Subassembly from '@/views/Subassembly'
// 在 components 组件中：
components:{
Subassembly
},
B、声明 :新名称 并调用父组件 data 中 tableData 的方法：
// 在 html 中添加 :新名称;
// 注意：此时的 :tableAllData 是可以任意取名字的；
<subassembly :tableAllData="tableData"></subassembly>
// 在 javascript 中 props 中调用父组件 data 中 tableData 的过程;
props: {
tableAllData:[]
// 注意：此时的 tableAllData 是要与 :新名称 中的 “新名称” 保持一致；
// 即：此时在子组件中调用 tableAllData 就能拿到父组件 data 中的 tableData 值；
},
其二、结果展示：
A、若在父组件的 data 中设置如下：
B、那么在子组件中调用该 data 的 tableAllData 值的控制台显示为：
C、此时在子组件中的调用方式为：
// 即：只要调用子组件中的 openDialog 方法，那么就能成功调用子组件中的 tableAllData 值，那么也就是成功调用了父组件中的 tableData 值；
Ⅳ、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482