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

您需要在视图模型上#include <iostream> #include <signal.h> #include<stdlib.h> #include<glu.h> // this is the lib which i am trying to include from D:\gnu\gcc-4.8.1\include\GL using namespace std; int main() { cout << "Hello World!"; return 0; }获取$emit，使用$emit或使用https://vuex.vuejs.org/en/intro.html。

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

bus

这没关系，但如果您有一长串组件，则需要this.$parent.$emit('ChangeView', e.target.dataset.section);到链中的每个$emit。

另一个选择是使用$parent vm作为总线，方法是将总线放在主要组件中并Vue放在其上：

emiting

也可以向var bus = new Vue({}); var vm = new Vue({ methods: { changeView() { bus.$emit('ChangeView', e.target.dataset.section); } } );发射，但不建议这样做。但是，如果您的$root变得非常复杂，您可能需要考虑使用Vues自己的状态管理系统vuex。

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

$on

这也与您使用总线类似，但您只需参考总线：

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

您也可以使用`v-on：

直接在html中使用它

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

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>

您可以找到一个有效的示例代码实现 here ，并在您自己的上下文中使用它。

Answer 3

除非我很可能会丢失某些东西，否则在这样的简单示例中，您只需要侦听组件中的emit ted事件即可。例如，在您的父元素中，您将具有：

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

然后在您的孩子（HorizontalNavigation）组件中，您将emit {ChangeView'事件：

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

我根据您对@craig_h的回答发表的评论，自己尝试了类似的代码，这正是我所需要的。我不需要emit做父母，也不需要使用公共汽车或vuex。

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

3 个答案: