Question

在嵌套对象中，我的组件中的计算属性不能很好地跟踪更改，因此计算属性不会按预期触发。相反，我想在父母中触发它。

执行方法的正确方法是什么，最好是从我的root中计算出来的方法？

我尝试使用

根方法

this.$emit('updated');

this.$parent.$on('updated', this.organise);并像这样抓住它，

但这会给我一个错误：

“updated”的事件处理程序出错：“TypeError：无法读取属性'apply'of undefined”

更新

Vue.prototype.globalEvents = new Vue();

var app = new Vue({
   el: '#root',
   methods: {
       x() {
          this.globalEvents.$emit('updated');
       }
   }
})

Vue.component('x', {
  created() {
     this.globalEvents.$on('updated', this.doStuff);
  }
})

仍然给我同样的错误

Answer 1

最简单的方法是创建全局事件总线。你可以这样做：

Vue.prototype.globalEvents = new Vue();

之后，您将能够从组件树中的任何位置发出和收听事件：

methods: {
 myMethod () {
    this.globalEvents.$emit(...)
    this.globalEvents.$on(...)
 }
}

或者，您可以以相同的方式创建本地事件总线，例如，创建名为bus.js的模块：

import Vue from 'vue';

const events = new Vue();

export default { events };

仅在您想要使用这些事件的组件中使用它。

从root-vue2触发子方法（或计算属性）

1 个答案: