VueJS 2：如何在一个组件方法触发时联动另一个组件方法？

嘿，我来帮你搞定这个跨组件调用方法的问题～首先得指出你之前代码的核心误区：Vue的watch是用来监听响应式数据（比如data、props、computed里的属性）变化的，根本没法监听方法的调用！而且你写的'this.$refs.component1.method1'这种监听路径也不符合watch的规则，所以这段代码肯定不会生效啦。

下面给你几种实用的解决方案，根据你的组件关系选就行：

方案一：事件总线（Event Bus）—— 适合任意关系的组件 #

这是Vue2里跨组件通信的经典方案，特别适合没有直接父子关系的组件：

1. 创建事件总线：在main.js或者单独的文件里创建一个Vue实例作为总线：

// main.js
import Vue from 'vue'
const bus = new Vue()
Vue.prototype.$bus = bus // 挂载到Vue原型上，所有组件都能访问

2. 在触发方（component1）的方法里发布事件：

// component1的script
export default {
  methods: {
    method1() {
      // 先执行组件1自己的逻辑
      console.log('component1 method1 执行了')
      // 发布事件，通知其他组件
      this.$bus.$emit('trigger-component2-method1')
    },
    method2() {
      console.log('component1 method2 执行了')
      this.$bus.$emit('trigger-component2-method2')
    }
  }
}

3. 在接收方（component2）里监听事件：

// component2的script
export default {
  methods: {
    method1() {
      console.log('component2 method1 被触发了')
      // 组件2的method1逻辑
    },
    method2() {
      console.log('component2 method2 被触发了')
      // 组件2的method2逻辑
    }
  },
  created() {
    // 监听事件，绑定对应方法
    this.$bus.$on('trigger-component2-method1', () => this.method1())
    this.$bus.$on('trigger-component2-method2', () => this.method2())
  },
  beforeDestroy() {
    // 组件销毁时解绑事件，防止内存泄漏
    this.$bus.$off('trigger-component2-method1')
    this.$bus.$off('trigger-component2-method2')
  }
}

方案二：父组件作为中间层—— 适合组件是兄弟/父子关系 #

如果两个组件都在同一个父组件下，用父组件做中转更直观：

1. component1调用方法时向父组件发射事件：

// component1的script
export default {
  methods: {
    method1() {
      console.log('component1 method1 执行了')
      this.$emit('call-component2-method1')
    },
    method2() {
      console.log('component1 method2 执行了')
      this.$emit('call-component2-method2')
    }
  }
}

2. 父组件监听事件，通过$refs调用component2的方法：

<!-- 父组件的template -->
<template>
  <component1 
    @call-component2-method1="handleCallMethod1"
    @call-component2-method2="handleCallMethod2"
  />
  <component2 ref="component2" />
</template>

<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'

export default {
  components: { Component1, Component2 },
  methods: {
    handleCallMethod1() {
      this.$refs.component2.method1()
    },
    handleCallMethod2() {
      this.$refs.component2.method2()
    }
  }
}
</script>

为什么你的原代码不生效？ #

再强调下：Vue的watch只能监听响应式数据的变化，方法本身不是响应式依赖，哪怕你写法正确，watch也不会感知到方法被调用。所以用watch监听方法这条路走不通哦～

内容的提问来源于stack exchange，提问作者M.A.L.