VueJS 2：组件中的 Watch 方法触发器答案

【问题标题】：VueJS 2 : Watch method trigger in a componentVueJS 2：组件中的 Watch 方法触发器
【发布时间】：2018-09-21 01:14:39
【问题描述】：

我正在开发带有 2 个组件的 VueJS2。

期望的行为：每次在一个组件中触发一个方法时，我想在另一个组件中触发一个方法。

我认为 watch 和 $refs 是我需要的。这就是它的样子：

 watch: {
    'this.$refs.component1.method1': () => {
        console.log('TRIGGERED method1')
        this.$refs.component2.method1()
    },
    'this.$refs.component1.method2': () => {
    console.log('TRIGGERED metdod2')
    this.$refs.component2.method2()
  }

很遗憾，这不起作用。是否可以观看方法调用？

【问题讨论】：

标签： vue.js vuejs2 vue-component watch

【解决方案1】：

在这种情况下，通常不使用观察者和参考。您可以使用什么取决于组件的组织方式。如果你想观察从子到父的方法，你可以简单地在组件中监听一个自定义事件。这样，您将使用 $emit(customevent) 从组件发出事件。然后，您可以使用 @customevent="yourMethod" 在父组件中添加侦听器。

vue 文档很好地解释了这一点：

https://vuejs.org/v2/guide/components-custom-events.html

当他们没有父子关系时，您需要事件总线。这通常意味着您创建一个名为 eventbus.js 的 .js 文件或包含以下内容的类似文件：

import Vue from 'vue';
export const EventBus = new Vue();

然后，您可以在要交换事件的每个组件中导入 eventbus.js，然后将事件发送到全局 evenbus，如下所示：

import { EventBus } from './event-bus.js';

export default {
    methods: {
        EmitmyMethod () {
            EventBus.$emit('customevent') 
        },
        ListenToMyMethod () {
            EventBus.$on('customevent')
        }
    }
}

【讨论】：

非常感谢您的回答，那我还有一个问题，是否可以使用 refs 观察组件中的数据变化？你能告诉我这样的事情是否可行吗？观看：{ 'this.$refs.component1.dataFromComponent1': () => { console.log('数据已修改！') } }
试了之后好像不行。不确定我是否以正确的方式使用它
Watchers 是 Vue 框架的一部分，但很少需要。观察者不能跨组件工作。在组件之间传递信息应该总是通过道具或事件发生。最简单的形式是道具/事件，更复杂的形式是事件总线，最复杂的形式是通过实现 Vuex。