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()

vue3中通过ref给子组件打标记,怎么拿子组件的数据,或者怎么执行子组件的方法并传递参数_第1张图片

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

vue3中通过ref给子组件打标记,怎么拿子组件的数据,或者怎么执行子组件的方法并传递参数_第2张图片

控制台打印的数据:

vue3中通过ref给子组件打标记,怎么拿子组件的数据,或者怎么执行子组件的方法并传递参数_第3张图片

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

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

假如我不暴露init方法:

vue3中通过ref给子组件打标记,怎么拿子组件的数据,或者怎么执行子组件的方法并传递参数_第4张图片

控制台:

vue3中通过ref给子组件打标记,怎么拿子组件的数据,或者怎么执行子组件的方法并传递参数_第5张图片

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

二、应用场景:

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

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

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

你可能感兴趣的:(前端开发,vue3,js,vue.js,前端,javascript,html)