解决：通过 ref 实现组件的子传父、父传子的问题

Ⅰ、组件交互问题：

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