javascript - $在 vue.js，es6 语法中从子级向父级发出事件

Question

我是 Vue.js 的新手，我使用 ES6 语法和 vue-class-component .我在尝试将事件从 child 发送到其 parent 时遇到问题。

我遵循了默认 Vue.js 语法的逻辑，但似乎无法让我的 parent 捕捉到 child 发出的事件。代码:

子组件

我在每个 <li> 上附加了一个点击事件监听器，它调用一个发出事件的函数。事件监听器在父级上定义。

 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 语法，我应该能够通过从元素发出事件来监听来自父级的子事件，但父级似乎没有捕捉到该事件。

我哪里错了？

Answer 1

您需要在要接收$emit 的 View 模型上$emit，使用bus 或使用https://vuex.vuejs.org/ .

直接发送给 parent

最简单的方法是直接从子组件$emit到父组件:

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

这OK，但是如果你有一个很长的组件链，你需要$emit到链中的每个$parent。

通过事件总线发出

您可以使用 Vue 非常简单地创建全局事件总线。您在主组件中创建一个 Vue 实例，然后应用程序中的所有其他组件都可以向它发出 事件，并使用 on 对这些事件使用react。

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

也可以发送到 $root 但不推荐这样做。但是，如果您的 app 确实变得相当复杂，您可能需要考虑使用 Vues 自己的状态管理系统，vuex , 而不是。

监听事件

您可以使用 $on 监听 View 模型中的 $emit 并监听特定事件:

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

如果您使用的是总线，这也很相似，但您只需引用总线即可:

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

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

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