Question

我正在使用2个组件处理VueJS2。

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

我认为手表和$ 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()
  }

不幸的是，这不起作用。是否可以观看方法调用？

Answer 1

在这种情况下，通常不使用观察者和参考。您可以使用的内容取决于组件的组织方式。如果要查看从子级到父级的方法，只需在组件中侦听自定义事件即可。这样，您将使用$ emit（customevent）从组件中发出事件。然后，您可以使用@customevent =＆＃34; yourMethod＆＃34;在父组件中添加侦听器。

vue docs非常好地解释了：

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')
        }
    }
}

有关此处的更多信息：

https://alligator.io/vuejs/global-event-bus/

VueJS 2：在组件

1 个答案: