Question

我已经通过事件的vue.js事件部分，但它似乎只提供了如何使用html中的vm。$ on处理程序来监听事件的示例。在它和2.0的新变化之间，我不确定如何简单地从孩子传输事件 - ＆gt;父节点。

我需要传输一个事件，因为父母接收后我想把它广播给另一个孩子。

我使用单页组件，这是我的设置：

// parent
export default {
  mounted: function () {
    this.$on('myEvent', function (msg) {
    console.log('caught in parent', msg)
  });
 },
 components: {
  'child': child,
 },
}

// child
this.$emit('myEvent', true)

我如何才能在父母vm上收到此活动？注意，我不想在html中使用$ on。我希望事件接收逻辑在vm中应该是。

谢谢，

Answer 1

关于Vues的

$emit文档不是很全面，但是，有几种方法可以做到这一点。首先，如果要使用$emit，则必须在要发送消息的vue模型上this.$on()，因此如果要从组件发送，则可以使用以下方式发送给直接父级：

this.$parent.$emit('myEvent',true);

但是，如果您拥有一长串父母，这可能会成为问题，因为您必须对子链进行$emit，因此在这种情况下您可以将Vue实例用作总线：

// In the root as a global variable so all components have access
var bus = new Vue({});

或者如果您使用的是单个文件组件。

window.bus = new Vue({});

然后在接收器中：

bus.$on('myEvent',() => {
   // Do stuff
});

在发射器中：

bus.$emit('myEvent',true);

最后，如果您发现app过于复杂而无法使用简单的总线，那么您可以使用vuex：

https://vuex.vuejs.org/en/index.html

使用vm。$ on在vue.js 2.0中监听从子节点发出的事件

1 个答案: