vue3中component动态组件调用孙子组件的方法

需求：从A页面跳转到B页面(B页面中有table组件) 点击A页面中的字段跳转定位到B页面table组件中对应的字段并且显示高亮

话不多说咱们开始

主要的一个代码逻辑

通过点击传参传一个数值调用饿了吗 table组件的setScrollLeft()做定位 设置水平滚动位置 这个是根据业务来看你是调哪一个方法 因为我是水平方向的所以调用setScrollLeft() 

这个setScrollLeft() 方法 他是要获取dom才能使用该方法，所以呢，就得先获取对应的dom元素，在vue2中获取dom的可以用this.$refs 但是vue3没有this 下面咱们聊聊vue3中获取dom然后完成这个需求

这里的代码是父组件的代码  component作为动态组件 会渲染其他组件，他渲染的组件就是子组件 ，因为这里的这个需求我们要用到饿了吗的setScrollLeft()做定位，但是父组件这里不能直接使用，这个主要原因是用饿了吗的table他对于当前的组件来说是孙子组件，就不能直接的调用setScrollLeft() 就需求使用defineExpose方法把setScrollLeft()暴露出去

所以这一层的逻辑就是 先从子组件中使用defineExpose把饿了吗的setScrollLeft()暴露给父组件，然后父组件又把这个方法暴露出去，供给component动态组件使用

孙子组件暴露方法

父组件中调用孙子组件方法 再次曝出出去  最后在component中使用暴露出来的方法做定位