$以vue.js,es6语法发出从子级到父级的事件

Question

我对Vue.js很新,我使用es6语法和vue-class-component.我在尝试从孩子向父母发出事件时遇到问题.我遵循默认的Vue.js语法的逻辑,但无法完成它.这里有一些更多的信息:

 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>
    );
  }
}

这是孩子.我点了每一个li就把它传给了父母.这是父母.

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语法,我应该能够通过将事件传递给元素来监听来自父节点的childs事件,就像拥有@ChangeView但没有任何东西穿过组件但是道具......对此有什么想法？谢谢 !

Answer 1

您需要$emit在要接收的视图模型上$emit,使用bus或使用https://vuex.vuejs.org/en/intro.html.

最简单的方法是简单地直接向父母发放:

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

这没关系,但是如果您需要链中的$emit每个组件都有一长串组件$emit.

另一个选择是$parent通过将总线放在主组件中并将emit其作为总线用作vm :

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

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

您可以app在viewmodel中$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>

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>

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

Answer 3

除非我遗漏了什么（很可能），在这样一个简单的例子中，你只需要emit在你的组件中监听ted 事件。例如，在您的父元素中，您将拥有：

<HorizontalNavigation v-on:ChangeView={this.ChangeView} />

然后在您的子 ( HorizontalNavigation) 组件中，您将emit使用 'ChangeView' 事件：

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

根据您对@craig_h 的回答所做的评论，我自己在类似的代码中尝试了这一点，这正是我所需要的。我不需要emit父母，也不需要使用总线或 vuex。