在es6语法中，使用vue.js将事件从子事件发送到父事件 [英] $emit an event from child to parent in vue.js, es6 syntax

问题描述

我刚接触Vue.js，并且在vue-class-component中使用ES6语法.我在尝试将事件从孩子发送给父母时遇到问题.

I'm pretty new to Vue.js, and I use ES6 syntax with vue-class-component. I'm having a problem while trying to emit an event from a child to its parent.

我遵循了默认Vue.js语法的逻辑，但似乎无法让我的父母抓住孩子发出的事件.代码:

I followed the logic of the default Vue.js syntax but can't seem to have my parent catch an event emitted by the the child. Code:

子组件

我在每个<li>上都附加了一个单击事件侦听器，该事件调用了一个发出事件的函数.事件侦听器是在父级上定义的.

I attached a click event listener on every <li>, which calls a function that emits an event. The event listener is defined on the parent.

 export default class HorizontalNavigation {

  handleClick (e) {
    e.preventDefault();
    // console.log(e.target.dataset.section);
    this.$emit('ChangeView', e.target.dataset.section);
  }

  render (h) {
    return (
      <div class={ style.horizontalNavigation } >
        <div class='sections-wrapper'>
          <div class={ style.sections }>
            <ol>
              <li><a on-click={ this.handleClick } href='#1' data-section='1' class='selected'>We are</a></li>
              <li><a on-click={ this.handleClick } href='#2' data-section='2'>Services</a></li>
              <li><a on-click={ this.handleClick } href='#3' data-section='3'>Cases</a></li>
              <li><a on-click={ this.handleClick } href='#4' data-section='4'>Studio</a></li>
              <li><a on-click={ this.handleClick } href='#5' data-section='5'>Career</a></li>
              <li><a on-click={ this.handleClick } href='#6' data-section='6'>Contact</a></li>
            </ol>

            <span class='filling-line' aria-hidden='true'></span>
          </div>
        </div>
      </div>
    );
  }
}

父组件

export default class ViewsContainer {

  ChangeView (data) {
    console.log(data);
  }

  render (h) {
      return (
        <div class={ style.restrictOverflow } >
          <HorizontalNavigation />
          <main class={ style.viewsContainer } on-ChangeView={ this.ChangeView     } >
            <SingleView dataSection='weare' id='1' class='selected' />
            <SingleView dataSection='services' id='2' />
            <SingleView dataSection='cases' id='3' />
            <SingleView dataSection='studio' id='4' />
            <SingleView dataSection='career' id='5' />
            <SingleView dataSection='contact' id='6' />
          </main>
        </div>
      );
    }
}

按照vue.js语法，我应该能够通过从元素发出事件来侦听来自父级的子级事件，但是父级似乎并没有捕获到该事件.

Following the vue.js syntax, I should be able to listen to the child's event from the parent, by emitting the event from the element, but the parent doesn't seem to catch the event.

我要去哪里错了?

推荐答案

您需要在要接收$emit的视图模型上$emit，使用bus或使用

You need to $emit on the view model you want to receive your $emit, use a bus or use https://vuex.vuejs.org/.

最简单的方法是简单地将$emit从子级直接转换为父级组件:

The easiest way, is to simply $emit from the child directly to the parent component:

this.$parent.$emit('ChangeView', e.target.dataset.section);

这是 OK ，但是如果您有很长的组件链，则需要$emit到链中的每个$parent.

This is OK, but if you have a long chain of components you need to $emit to each $parent in the chain.

您可以使用Vue非常简单地创建全局事件总线.您在主要组件中创建了Vue的实例，然后应用程序中的所有其他组件都可以对它进行emit事件，并使用on对这些事件做出反应.

You can use Vue to create a global event bus very simply. You create an instance of Vue in your main component, then all other components in your application can emit events to it, and use on to react to those events.

var bus = new Vue({});
var vm = new Vue({
  methods: {
    changeView() {
      bus.$emit('ChangeView', e.target.dataset.section);
    }
  });

也可以发射到$root，但是不建议这样做.但是，如果您的app确实变得非常复杂，您可能要考虑使用Vues自己的状态管理系统， vuex ，相反.

It is also possible to emit to $root but this isn't recommended. However, if your app does get quite complex you may want to consider using Vues own state management system, vuex, instead.

您可以使用$on在视图模型中监听$emit并监听特定事件:

You can listen for the $emit in the viewmodel using $on and listening for the specific event:

    var vm = new Vue({
      created() {
         this.$on('ChangeView', section => {
            console.log(section);
          });
      }
    );

如果您正在使用公交车，这也将类似，但是您将只引用公交车:

This would also be similar is you were using the bus, but you would just reference the bus instead:

bus.$on('ChangeView, ...);

您也可以使用v-on直接在html中使用它:

And you may also use it directly in your html using v-on:

<div v-on:ChangeView="doSomething"></div>

这篇关于在es6语法中，使用vue.js将事件从子事件发送到父事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！