Vue中如何给<component>绑定ref并跨组件调用动态组件内的方法

问题根因 #

ref 只会挂载到定义该ref的当前组件实例上，不会全局同步到$root根实例，因此你直接通过this.$root.$refs访问自然只能拿到空对象。

可行实现方案 #

方案1：全局事件总线（适用Vue2，无关联跨组件场景） #

这是最轻量的跨组件通信方案，无需引入额外依赖：

1. 项目入口main.js中注册全局总线：

Vue.prototype.$bus = new Vue()

2. 在定义了动态组件的第一个组件内，挂载阶段监听自定义事件，销毁阶段解绑事件避免内存泄漏：

export default {
  mounted() {
    this.$bus.$on('triggerDynamicMethod', (params) => {
      // 可选链判断动态组件是否存在，避免切换动态组件时报错
      this.$refs.dynamicComponent?.dynamicMethod(params)
    })
  },
  beforeDestroy() {
    this.$bus.$off('triggerDynamicMethod')
  }
}

3. 第二个组件需要调用方法时，直接触发对应事件即可：

this.$bus.$emit('triggerDynamicMethod', 你需要传递的参数)

方案2：状态管理标记触发（适用已接入Vuex/Pinia的项目） #

如果你的项目已经用了全局状态管理，可以通过状态变更触发方法调用：

• 在全局状态中新增triggerDynamicMethod标记位，配套修改该标记的同步方法
• 第一个组件中监听该标记的变化，标记变更时调用动态组件的dynamicMethod，调用完成后重置标记位即可

方案3：provide/inject（适用组件为祖先/后代关系的场景） #

如果第二个组件是第一个组件的后代组件，可以用更直接的依赖注入方式：

1. 第一个组件中provide调用方法：

export default {
  provide() {
    return {
      callDynamicMethod: (params) => {
        this.$refs.dynamicComponent?.dynamicMethod(params)
      }
    }
  }
}

2. 第二个组件中inject该方法，直接调用即可：

export default {
  inject: ['callDynamicMethod'],
  methods: {
    yourMethod() {
      this.callDynamicMethod(参数)
    }
  }
}

注意事项 #

• 动态组件切换时需要判断$refs.dynamicComponent是否存在，避免调用空方法报错
• ref只有在组件挂载完成后才会生成，不要在created等未挂载的生命周期中访问ref

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