Vue动态子组件访问问题：如何调用当前子组件方法

你遇到的问题很典型——用$emit触发事件会让所有注册过该事件的子组件都响应，而你只想操作当前活跃的那个动态组件。其实Vue提供了更直接的方式：使用ref绑定动态组件，它会自动指向当前渲染的组件实例，完美解决你的需求。

具体步骤： #

1. 替换id为ref：在动态组件标签里，把id="my-cmp"改成ref="myCmp"。Vue的ref是专门用来获取组件/DOM元素实例的，当动态组件切换时，ref会自动更新为当前活跃的组件实例。
2. 通过$refs访问组件并调用方法：在父组件的方法里，直接用this.$refs.myCmp获取当前组件，然后调用它的方法即可。记得先判断组件是否存在（因为v-if可能让组件未渲染），避免报错。

修改后的完整代码示例： #

<template>
  <!-- 动态组件切换时，ref会自动指向当前渲染的组件 -->
  <component v-if="templateComponent" :is="templateComponent" ref="myCmp"></component>
</template>

<script>
export default {
  components: {
    'cmp1': Component1,
    'cmp2': Component2, // 修正你代码里的笔误，将重复的Component1改为Component2
  },
  computed: {
    templateComponent() {
      // 你的组件切换逻辑，返回'cmp1'或'cmp2'
      return 'cmp1';
    },
  },
  methods: {
    someTrigger() {
      // 先判断组件实例是否存在，再调用方法
      const currentComponent = this.$refs.myCmp;
      if (currentComponent) {
        currentComponent.doSomething();
      }
    }
  }
}
</script>

为什么$emit的方式不行？ #

你之前的写法里，子组件通过this.$parent.$on监听父组件事件，这种方式会让所有曾经注册过该事件的子组件都响应——即使组件被v-if销毁，若监听事件没有在beforeDestroy钩子中正确解绑，旧组件的监听可能依然存在，导致emit触发多个组件的方法。而用ref只会获取当前正在渲染的组件实例，完全不会有这个问题。

额外注意事项： #

• 如果你的动态组件用了<keep-alive>缓存，ref依然有效，会指向当前激活的缓存组件实例。
• 因为v-if是惰性渲染，当templateComponent为假时，this.$refs.myCmp会是undefined，所以一定要加存在性判断，避免控制台报错。

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