vue3中通过ref给子组件打标记，怎么拿子组件的数据，或者怎么执行子组件的方法并传递参数

一、vue3中实现拿子组件的数据，或者怎么执行子组件的方法并传递参数

问题：vue2的时候我们都可以直接通过ref标记一下组件，再通过 this.$refs[refName].init() 的方式去掉用 子组件的init方法 ，通过这样的方法还可以给 init这个方法传递参数。vue3中没有this之后怎么拿子组件的数据，或者怎么执行子组件的方法并传递参数呢？

vue3也是具备这个能力的：

1、也是需要给子组件打上 ref 标记 （不同与vue2的是，vue2直接添加属性 ref="refName", vue3除了添加属性 ref="refName" 之外还用通过 ref 去定义一下比如const refNode = ref() 

注意：必须是ref定义的，reactive定义标记是不行的

const refNode = ref()

2、子组件通过 defineExpose() , 暴露需要父级使用的方法以及数据（vue2是不需要这一步的）

如下图：

子组件通过 defineExpose()  暴露了 testData以及 init()

父级通过ref标记拿到子组件并掉用 init方法 

控制台打印的数据：

可以看到，lineChartsDom 上只有 init方法 以及 testData这个数据对象 ，并且init方法也执行了且拿到了父级穿下来的数据

提示：因为使用ref定义的标记，所以需要.value去拿，必须是ref定义的，reactive定义标记是不行的

假如我不暴露init方法：

控制台：

lineChartsDom就只有testData 数据对象了，并且父级调用了一个没有暴露的方法，找不到导致报错了

二、应用场景：

就比如我的子组件是是一个 echarts 数据都是通过父级穿下来的，但数据变化的时候，需要通知子组件重新渲染 echarts 视图（myChart.setOption(options);）

        方法一：通过watch 去监听 props 的变化再去更新echarts 视图

        方法二：就是可以通过这种方式，子组件定一个更新视图的方法，父级在每次调用后端接口成功拿到数据之后的这个时机，调用子组件的更新视图的方法去更新，