Angular 5：如何从父组件调用指定子组件（第2个）的函数

这是Vue项目里挺常见的需求，要精准触发第二个子组件的方法，核心是得准确拿到那个子组件的实例。下面给你两种实用的实现方案，根据你的场景选就行：

方案一：利用ref数组直接获取组件实例 #

这种方式最直接，适合快速实现：

1. 给所有子组件统一设置ref属性：

<template>
  <div>
    <App-child ref="childComponents"></App-child>
    <App-child ref="childComponents"></App-child>
    <App-child ref="childComponents"></App-child>
  </div>
</template>

2. 在父组件的逻辑中（比如某个方法里），通过$refs获取第二个子组件实例并调用方法：

// Vue2 写法
callTargetChildMethod() {
  // 数组索引从0开始，第二个子组件对应索引1
  const targetChild = this.$refs.childComponents[1];
  if (targetChild) {
    targetChild.yourSpecificFunction(); // 替换成你要调用的函数名
  }
}

// Vue3 + Composition API 写法：
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const childComponents = ref([]);

    const callTargetChildMethod = () => {
      if (childComponents.value[1]) {
        childComponents.value[1].yourSpecificFunction();
      }
    };

    return { childComponents, callTargetChildMethod };
  }
}

注意：要确保在组件挂载完成后（比如mounted钩子之后）再调用这个方法，否则$refs还没收集到子组件实例。

方案二：通过响应式状态触发（更符合Vue设计理念） #

如果你不想直接操作组件实例，这种响应式的方式更优雅：

1. 给每个子组件传递唯一标识（比如索引），同时在父组件定义一个响应式状态用来标记要触发的子组件：

<!-- 父组件模板 -->
<template>
  <div>
    <App-child :index="0" :trigger-method="triggerTargetIndex"></App-child>
    <App-child :index="1" :trigger-method="triggerTargetIndex"></App-child>
    <App-child :index="2" :trigger-method="triggerTargetIndex"></App-child>
  </div>
</template>

<script>
// Vue2 写法
export default {
  data() {
    return {
      triggerTargetIndex: null
    };
  },
  methods: {
    callSecondChildMethod() {
      // 标记要触发索引为1的子组件
      this.triggerTargetIndex = 1;
      // 重置状态，避免重复触发
      setTimeout(() => {
        this.triggerTargetIndex = null;
      }, 0);
    }
  }
}
</script>

2. 在子组件中监听trigger-method属性的变化，当匹配到自己的索引时调用目标函数：

<!-- 子组件 App-child -->
<script>
export default {
  props: ['index', 'triggerMethod'],
  watch: {
    triggerMethod(newVal) {
      if (newVal === this.index) {
        this.yourSpecificFunction(); // 执行自身的目标函数
      }
    }
  },
  methods: {
    yourSpecificFunction() {
      // 你的函数逻辑
      console.log('子组件方法被调用');
    }
  }
}
</script>

这种方式不需要直接操作组件实例，完全通过Vue的响应式系统驱动，更适合复杂场景下的状态管理。

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