Vue3中如何在子组件挂载前调用其暴露的方法？

针对你遇到的初始化调用expand方法出现的问题，有几种可行方案：

• 优先使用组件自带的初始化展开属性
  绝大多数UI框架的树形组件（比如Element Plus、Ant Design Vue的Tree组件）都提供了默认展开的配置属性，比如default-expanded-keys。直接绑定需要展开的节点key数组，组件会在内部初始化阶段就处理好展开状态，完全不会出现闪烁。
  示例代码：

  <template>
    <el-tree 
      :data="treeData" 
      :default-expanded-keys="targetExpandedKeys"
    />
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const treeData = ref([
    { id: 'node-1', label: '节点1', children: [...] },
    { id: 'node-2', label: '节点2', children: [...] }
  ])
  // 设置需要默认展开的节点ID集合
  const targetExpandedKeys = ref(['node-1'])
  </script>
  

• 封装第三方组件，利用beforeMount钩子
  如果组件没有提供默认展开属性，或者你必须调用expand方法，可以封装一层组件，在封装组件的onBeforeMount钩子中调用目标方法。此时组件还未挂载到DOM，不会出现视觉闪烁。
  示例代码：

  <template>
    <el-tree ref="innerTreeRef" :data="treeData" />
  </template>
  
  <script setup>
  import { ref, onBeforeMount } from 'vue'
  import { ElTree } from 'element-plus'
  
  const innerTreeRef = ref(null)
  const treeData = ref([/* 树形数据 */])
  
  onBeforeMount(() => {
    // 调用组件暴露的展开方法，示例为展开全部
    innerTreeRef.value?.expandAll()
  })
  </script>
  

• 自定义组件添加初始化展开Props
  如果是你自己开发的树形组件，可以添加initExpand Props，在子组件的onBeforeMount阶段触发展开逻辑：

  <!-- 自定义Tree组件 -->
  <template>
    <div class="custom-tree">
      <!-- 树形结构渲染代码 -->
    </div>
  </template>
  
  <script setup>
  import { onBeforeMount } from 'vue'
  
  const props = defineProps({
    initExpand: {
      type: Boolean,
      default: false
    }
  })
  
  // 组件内部的展开方法
  const expand = () => {
    // 实现展开逻辑
  }
  
  onBeforeMount(() => {
    if (props.initExpand) expand()
  })
  
  defineExpose({ expand })
  </script>
  

  父组件使用时只需传入init-expand="true"即可。

内容的提问来源于stack exchange，提问作者tnmoon