$emit an event from child to parent in vue.js, es6 语法

Question

我对 Vue.js 很陌生，我使用 ES6 语法 vue-class-component 。我在尝试从孩子向其父母发出事件时遇到问题。

我遵循了默认 Vue.js 语法的逻辑，但似乎无法让我的父母捕捉到孩子发出的事件。代码：

子组件

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

我哪里错了？

原文由 Lou 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

直接发送给父母

最简单的方法，就是简单地 $emit 从子组件直接到父组件：

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

这 _没关系_，但如果你有一个长链组件，你需要 $emit 到链中的每个 $parent 。

通过事件总线发射

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

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

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

监听事件

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

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

如果您使用的是总线，这也类似，但您只需引用总线：

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

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

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

原文由 craig_h 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 Vue 中，您可以通过 发出事件 从子组件到父组件进行通信。 子 组件 “发出” 带有 $emit 的事件，而 父组件 “监听” 它，如下所示：

子组件：

 <template>
  <div>
    <button @click="this.handleClick">Click me!</button>
  </div>
</template>

<script>
export default {
  name: "BaseButton",
  methods: {
    handleClick: function() {
      this.$emit("clickFromChildComponent");
    }
  }
};
</script>

<style scoped>

</style>

父组件：

 <template>
  <div class="home">
    <h1>Passing a event from child up to parent!</h1>
    <BaseButton @clickFromChildComponent="handleClickInParent"/>
  </div>
</template>

<script>
import BaseButton from "./BaseButton";

export default {
  components: {
    BaseButton
  },
  name: "Home",
  methods: {
    handleClickInParent: function() {
      alert('Event accessed from parent!');
    }
  }
};
</script>

<style scoped>

</style>

您可以 在此处 找到一个 工作示例代码实现 并在您自己的上下文中使用它。

原文由 Manuel Abascal 发布，翻译遵循 CC BY-SA 4.0 许可协议