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()暴露出去

 <template #default="{ size }">
  <transition name="fade-slide" mode="out-in">
  <component
   :is="Component"
   :height="size.height"
   :loading="tableLoading"
   :data="tableData"
   :pagination="pagination"
   :isTree="true"
    @replace-icon="replaceIcon"
    :default-expand-all="defaultExpandAll"
    :expand-row-keys="expands"
     ref="tableRefs"
            />
          </transition>
</template>
<script>
 const tableRefs =ref(null)
 nextTick(()=>{
            console.log(tableRefs.value);
             // 跳转定位
             tableRefs.value.dinwei(skipParams.value.bnwcczNum)
             
          })
</script>

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

孙子组件暴露方法

<template>
  <div class="xt-table">
    <el-table
      v-bind="$attrs"
      :stripe="stripe"
      v-loading="loading"
      :default-sort="tableSort"
      :data="data"
      element-loading-text="加载中..."
      element-loading-background="rgba(0, 0, 0, 0)"
      :span-method="spanMethod"
      :height="height"
      :lazy="isTree"
      row-key="hd"
      :row-class-name="tableRowClassName"
      :expand-row-keys="expandRowKeys"
      :default-expand-all="defaultExpandAll"
      border
      ref="tableRef"
    >
</template>
<script setup>
const tableRef = ref(null)
  function bnPos(num){
     tableRef.value.setScrollLeft(num)
   }
  defineExpose({bnPos})
</script>

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

<template>
    <xt-table :columns="ContableColumns"  :header-cell-style="tableHeaderColor"  ref="tableRefs" >
        <!-- <el-table-column type="expand">
     <template #default="props">
   <xt-table :height="50"  :data="props.children"  />
    </template>
   </el-table-column> -->
    <template #actions="{ scope }">
       <el-button link @click="viewParameter(scope.row)" v-if="scope.row.xmbh !== null"
                    >台账明细</el-button
                  >
                </template>
    </xt-table>
    </template>
    <script setup>
    import { inject, ref,defineExpose } from 'vue';
    import xtTable from '../components/xtTable.vue'
    import {ContableColumns} from './ContractInfor'
    const change = inject('change')
    const xmbh = inject('xmbh')
    const  currentTab = inject('currentTab')
    const viewParameter = (row) => {
      xmbh.value = row.xmbh
      currentTab.value = 'parameter'
      change.value = false
    }

    const skipParams = inject('skipParams')
    function tableHeaderColor({ rowIndex, columnIndex }){
    // 接收参数后显示高亮
    if (rowIndex === 0 && columnIndex === 11) {
      return { 'color': skipParams.value.bnwcczCor } 
    
  }
    
}
     const tableRefs =ref(null)
    
      function dinwei(num){
             // 跳转定位
             tableRefs.value.bnPos(num)
         
      }

    defineExpose({dinwei})       
      


    </script>