VueJs 2.0从大孩子到他的大父母组件发出事件

似乎Vue.js 2.0不会将事件从孙子传递到他的父组件。

Vue.component('parent', {
  template: '<div>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>',
  data(){
    return {
      action: 'No action'
    }
  },
  methods: {
    performAction() { this.action = 'actionDone' }
  }
})

Vue.component('child', {
  template: '<div>I am the child <grand-child></grand-child></div>'
})

Vue.component('grand-child', {
  template: '<div>I am the grand-child <button @click="doEvent">Do Event</button></div>',
  methods: {
    doEvent() { this.$emit('eventtriggered') }
  }
})

new Vue({
  el: '#app'
})

这个JsFiddle解决了https://jsfiddle.net/y5dvkqbd/4/的问题，但是通过列举了两个事件：

• 从孙子到中间部分
• 然后从中间部分再次发射到祖父母

添加此中间事件似乎是重复且不必要的。有没有一种方法可以直接向我不知道的祖父母发出？

Vue 2.4引入了一种使用以下方法轻松将事件传递到层次结构的方法 vm.$listeners

从https://vuejs.org/v2/api/#vm-listeners：

包含父级v-on事件侦听器（不带.native修饰符）。可以通过以下方式将其传递给内部组件v-on="$listeners"-在创建透明包装器组件时很有用。

请参阅以下代码段，在模板v-on="$listeners"的grand-child组件中使用child：

Vue.component('parent', {
  template:
    '<div>' +
      '<p>I am the parent. The value is {{displayValue}}.</p>' +
      '<child @toggle-value="toggleValue"></child>' +
    '</div>',
  data() {
    return {
      value: false
    }
  },
  methods: {
    toggleValue() { this.value = !this.value }
  },
  computed: {
    displayValue() {
      return (this.value ? "ON" : "OFF")
    }
  }
})

Vue.component('child', {
  template:
    '<div class="child">' +
      '<p>I am the child. I\'m just a wrapper providing some UI.</p>' +
      '<grand-child v-on="$listeners"></grand-child>' +
    '</div>'
})

Vue.component('grand-child', {
  template:
    '<div class="child">' +
      '<p>I am the grand-child: ' +
        '<button @click="emitToggleEvent">Toggle the value</button>' +
      '</p>' +
    '</div>',
  methods: {
    emitToggleEvent() { this.$emit('toggle-value') }
  }
})

new Vue({
  el: '#app'
})

.child {
  padding: 10px;
  border: 1px solid #ddd;
  background: #f0f0f0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <parent></parent>
</div>

Vue社区通常支持使用Vuex解决此类问题。对Vuex状态进行了更改，并且DOM表示由此而来，从而在许多情况下无需发生事件。

除非如此，否则重新发送可能是下一个最佳选择，最后，您可以选择使用事件总线，如对该问题的其他最高评价的答案所述。

下面的答案是我对这个问题的原始答案，而不是我现在拥有Vue经验的方法。

在这种情况下，我可能会不同意Vue的设计选择，而诉诸DOM。

在grand-child，

methods: {
    doEvent() { 
        try {
            this.$el.dispatchEvent(new Event("eventtriggered"));
        } catch (e) {
            // handle IE not supporting Event constructor
            var evt = document.createEvent("Event");
            evt.initEvent("eventtriggered", true, false);
            this.$el.dispatchEvent(evt);
        }
    }
}

和parent，

mounted(){
    this.$el.addEventListener("eventtriggered", () => this.performAction())
}

否则，是的，您必须重新发射或使用公共汽车。

注意：我在doEvent方法中添加了代码来处理IE；该代码可以以可重用的方式提取。

新答案（2018年11月更新）

我发现我们实际上可以通过利用$parent大子组件中的属性来做到这一点：

this.$parent.$emit("submit", {somekey: somevalue})

更清洁，更简单。

是的，您是对的，事件只发生在孩子和父母之间。他们没有走得更远，例如从孩子到祖父母。

Vue文档（简要地）在“非父子沟通”部分解决了这种情况。

通常的想法是，在祖父母组件中创建一个空Vue组件，该组件通过道具从祖父母那里传递给子孙。然后，祖父母会监听事件，孙子孙女会在该“事件总线”上发出事件。

一些应用程序使用全局事件总线而不是每个组件的事件总线。使用全局事件总线意味着您将需要具有唯一的事件名称或命名空间，以便事件不会在不同组件之间发生冲突。

这是一个如何实现简单的全局事件总线的示例。

另一种解决方案将在 根节点：

用途vm.$root.$emit在盛大孩子，然后使用vm.$root.$on在祖先（或者任何你想）。

更新：有时您想在某些特定情况下禁用侦听器，请使用vm。$ off（例如： vm.$root.off('event-name')inside lifecycle hook = beforeDestroy）。

Vue.component('parent', {
  template: '<div><button @click="toggleEventListener()">Listener is {{eventEnable ? "On" : "Off"}}</button>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>',
  data(){
    return {
      action: 1,
      eventEnable: false
    }
  },
  created: function () {
    this.addEventListener()
  },
  beforeDestroy: function () {
    this.removeEventListener()
  },
  methods: {
    performAction() { this.action += 1 },
    toggleEventListener: function () {
      if (this.eventEnable) {
        this.removeEventListener()
      } else {
        this.addEventListener()
      }
    },
    addEventListener: function () {
      this.$root.$on('eventtriggered1', () => {
        this.performAction()
      })
      this.eventEnable = true
    },
    removeEventListener: function () {
      this.$root.$off('eventtriggered1')
      this.eventEnable = false
    }
  }
})

Vue.component('child', {
  template: '<div>I am the child <grand-child @eventtriggered="doEvent"></grand-child></div>',
  methods: {
    doEvent() { 
    	//this.$emit('eventtriggered') 
    }
  }
})

Vue.component('grand-child', {
  template: '<div>I am the grand-child <button @click="doEvent">Emit Event</button></div>',
  methods: {
    doEvent() { this.$root.$emit('eventtriggered1') }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <parent></parent>
</div>

如果您想保持灵活性，并只是简单地将事件广播给所有父母，然后他们的父母从头到尾递归播放，则可以执行以下操作：

let vm = this.$parent

while(vm) {
    vm.$emit('submit')
    vm = vm.$parent
}

这是我使用事件总线的唯一情况！为了将数据从深层嵌套子级传递到非直接父级，进行通信。

首先：创建一个具有以下内容的js文件（我将其命名为eventbus.js）：

import Vue from 'vue'    
Vue.prototype.$event = new Vue()

第二：在您的子组件中发出一个事件：

this.$event.$emit('event_name', 'data to pass')

第三：在父母那里听那个事件：

this.$event.$on('event_name', (data) => {
  console.log(data)
})

注意：如果您不想再参加该活动，请取消注册：

this.$event.$off('event_name')

INFO：无需阅读以下个人意见

我不喜欢将vuex用于子孙到祖父母的交流（或类似的交流水平）。

在用于将数据从祖父母传递给孙子女的vue.js中，您可以使用provide / inject。但是相反的事情没有类似的东西。（孙辈到祖父母）因此，每当需要进行此类交流时，我都会使用事件总线。

我根据@digout答案做了一个简短的mixin。您想在Vue实例初始化（新Vue ...）之前放置它，以便在项目中全局使用它。您可以像正常事件一样使用它。

Vue.mixin({
  methods: {
    $propagatedEmit: function (event, payload) {
      let vm = this.$parent;
      while (vm) {
        vm.$emit(event, payload);
        vm = vm.$parent;
      }
    }
  }
})

VueJS 2组件有一个 $parent包含其父组件属性。

该父组件还包括自己的组件 $parent属性。

然后，访问“祖父母”组件就是访问“父母的父母”组件的问题：

this.$parent["$parent"].$emit("myevent", { data: 123 });

无论如何，这有点棘手，我建议使用像其他响应者所说的那样的全局状态管理器，例如Vuex或类似的工具。

避开@kubaklam和@digout的答案，这就是我用来避免在孙子与（可能是遥远的）祖父母之间的每个父组件上发出的东西：

{
  methods: {
    tunnelEmit (event, ...payload) {
      let vm = this
      while (vm && !vm.$listeners[event]) {
        vm = vm.$parent
      }
      if (!vm) return console.error(`no target listener for event "${event}"`)
      vm.$emit(event, ...payload)
    }
  }
}

当使用遥远的孙子代币构建组件时，您不希望将许多组件绑定到商店，而希望根组件充当事实的存储/源，这很好用。这类似于Ember的数据减少行为。缺点是，如果您想在两者之间的每个父级上监听该事件，那么它将无法正常工作。但是然后您可以使用$ propogateEmit，如上述@kubaklam的回答。

编辑：初始vm应该设置为组件，而不是组件的父级。即let vm = this不是let vm = this.$parent

我真的通过创建绑定到窗口的类并简化了广播/收听设置来在Vue应用程序中的任何地方工作来挖掘这种处理方式。

window.Event = new class {

    constructor() {
        this.vue = new Vue();
    }

    fire(event, data = null) {
        this.vue.$emit(event, data);
    }

    listen() {
        this.vue.$on(event, callback);  
    }

}

现在，您可以通过调用以下任意位置来触发/广播/任何内容：

Event.fire('do-the-thing');

...并且您可以通过以下任何一种方式在父母，祖父母或外祖父母中聆听：

Event.listen('do-the-thing', () => {
    alert('Doing the thing!');
});