Vue递归组件中通过ref调用嵌套子组件方法的问询

这个场景我之前也遇到过，核心思路是让每个子组件自己管理自身的子节点引用，并封装递归调用的逻辑，父组件只需要触发顶层组件的方法，剩下的递归由组件内部自动完成，这样既符合组件封装性，又能轻松处理任意嵌套层级。

下面分Vue2和Vue3两种常用版本给出具体实现方案：

Vue2 实现方案 #

1. 子组件（MyComponent.vue） #

每个子组件需要暴露一个可调用的方法，同时自动收集自身的子组件引用，在方法内部完成自身逻辑+递归调用子组件：

<template>
  <div class="my-component">
    <!-- 当前组件内容 -->
    <h4>节点：{{ item.name }}</h4>
    <!-- 递归渲染子组件，通过ref收集子节点 -->
    <my-component
      v-for="child in item.children"
      :key="child.id"
      :item="child"
      ref="childComponents"
    ></my-component>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    item: {
      type: Object,
      required: true,
      // 数据结构示例：{ id: 1, name: "父节点", children: [] }
    }
  },
  methods: {
    // 暴露给父组件的核心方法
    triggerTargetMethod() {
      // 1. 执行当前组件的业务逻辑
      console.log(`处理节点 ${this.item.id} 的逻辑`);
      
      // 2. 递归调用所有子组件的同名方法
      if (this.$refs.childComponents) {
        // 处理单个子节点的情况（Vue2中单个ref是对象，多个才是数组）
        const childList = Array.isArray(this.$refs.childComponents) 
          ? this.$refs.childComponents 
          : [this.$refs.childComponents];
        
        childList.forEach(child => {
          child.triggerTargetMethod();
        });
      }
    }
  }
}
</script>

2. 父组件调用 #

父组件只需获取顶层子组件的ref，直接调用其暴露的方法即可：

<template>
  <div>
    <button @click="invokeAllChildren">触发所有层级子组件方法</button>
    <my-component 
      ref="topLevelComponent"
      :item="rootNode"
    ></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: { MyComponent },
  data() {
    return {
      rootNode: {
        id: 0,
        name: "根节点",
        children: [
          { id: 1, name: "子节点1", children: [{ id: 11, name: "孙节点11", children: [] }] },
          { id: 2, name: "子节点2", children: [] }
        ]
      }
    }
  },
  methods: {
    invokeAllChildren() {
      this.$refs.topLevelComponent.triggerTargetMethod();
    }
  }
}
</script>

Vue3 实现方案 #

Vue3中v-for的ref不会自动转为数组，需要手动收集子组件引用，同时要通过defineExpose暴露方法给父组件：

1. 子组件（MyComponent.vue） #

<template>
  <div class="my-component">
    <h4>节点：{{ item.name }}</h4>
    <!-- 手动收集子组件引用 -->
    <my-component
      v-for="child in item.children"
      :key="child.id"
      :item="child"
      :ref="collectChildRefs"
    ></my-component>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue';

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
});

// 手动收集子组件ref数组
const childComponents = ref([]);

// 收集子组件的回调函数
const collectChildRefs = (el) => {
  if (el) childComponents.value.push(el);
};

// 组件卸载时清空ref，防止内存泄漏
onBeforeUnmount(() => {
  childComponents.value = [];
});

// 定义核心方法
const triggerTargetMethod = () => {
  // 1. 当前组件的业务逻辑
  console.log(`处理节点 ${props.item.id} 的逻辑`);
  
  // 2. 递归调用子组件方法
  childComponents.value.forEach(child => {
    child.triggerTargetMethod();
  });
};

// 暴露方法给父组件访问
defineExpose({
  triggerTargetMethod
});
</script>

2. 父组件调用 #

<template>
  <div>
    <button @click="invokeAllChildren">触发所有层级子组件方法</button>
    <my-component 
      ref="topLevelComponent"
      :item="rootNode"
    ></my-component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';

const topLevelComponent = ref(null);
const rootNode = ref({
  id: 0,
  name: "根节点",
  children: [
    { id: 1, name: "子节点1", children: [{ id: 11, name: "孙节点11", children: [] }] },
    { id: 2, name: "子节点2", children: [] }
  ]
});

const invokeAllChildren = () => {
  topLevelComponent.value?.triggerTargetMethod();
};
</script>

额外注意事项 #

• 如果需要传递参数给方法，只需在triggerTargetMethod中添加参数，并在递归调用时传递即可，比如triggerTargetMethod(params)。
• 确保子组件的方法已经正确暴露给父组件（Vue2自动暴露，Vue3需要defineExpose）。
• Vue3中手动收集的ref数组要在组件卸载时清空，避免内存泄漏。

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