javascript - 在es6语法中使用vue.js将事件从子事件发送到父事件($emit an event from child to parent in vue.js, es6 syntax)

Question

I'm pretty new to Vue.js, and I use ES6 syntax with vue-class-component .(我是Vue.js的新手，并且使用ES6语法和vue-class-component 。)

I'm having a problem while trying to emit an event from a child to its parent.(我在尝试将事件从孩子发送给父母时遇到问题。) 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.(我遵循了默认Vue.js语法的逻辑，但似乎无法让我的父母抓住孩子发出的事件。) Code:(码：) Child Component(子组件) I attached a click event listener on every <li> , which calls a function that emits an event.(我在每个<li>上附加了一个click事件监听器，该监听器调用了一个发出事件的函数。) 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> ); } } Parent Component(父组件) 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> ); } } 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.(按照vue.js语法，我应该能够通过从元素发出事件来侦听来自父级的子级事件，但是父级似乎没有捕获到该事件。) Where am I going wrong?(我要去哪里错了？)   ask by Lou translate from so

Answer 1

You need to $emit on the view model you want to receive your $emit , use a bus or use https://vuex.vuejs.org/ .(您需要在要接收$emit的视图模型上使用$emit ，使用bus或使用https://vuex.vuejs.org/ 。)

Emitting to parent directly(直接发给父母) The easiest way, is to simply $emit from the child directly to the parent component:(最简单的方法是直接从子级直接将$emit传递给父级组件：) this.$parent.$emit('ChangeView', e.target.dataset.section); This is OK , but if you have a long chain of components you need to $emit to each $parent in the chain.(可以 ，但是如果您有很长的组件链，则需要$emit到链中的每个$parent 。) Emiting via an Event Bus(通过事件总线发射) You can use Vue to create a global event bus very simply.(您可以使用Vue非常简单地创建全局事件总线。) 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.(您在主要组件中创建Vue实例，然后应用程序中的所有其他组件可以向其emit事件，并使用on来响应这些事件。) var bus = new Vue({}); var vm = new Vue({ methods: { changeView() { bus.$emit('ChangeView', e.target.dataset.section); } }); It is also possible to emit to $root but this isn't recommended.(也可以向$root发出，但是不建议这样做。) However, if your app does get quite complex you may want to consider using Vues own state management system, vuex , instead.(但是，如果您的app确实变得非常复杂，则可能需要考虑使用Vues自己的状态管理系统vuex 。) Listening for events(听事件) You can listen for the $emit in the viewmodel using $on and listening for the specific event:(您可以使用$on在视图模型中监听$emit并监听特定事件：) 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, ...); And you may also use it directly in your html using v-on :(您也可以使用v-on在html中直接使用它：) <div v-on:ChangeView="doSomething"></div>