在 vue.js 中 $emit 从子到父的事件，es6 语法 [英] $emit an event from child to parent in vue.js, es6 syntax
问题描述
我是 Vue.js 的新手，我使用 ES6 语法和 vue-class-component.我在尝试从子级向其父级发出事件时遇到问题.
我遵循默认 Vue.js 语法的逻辑，但似乎无法让我的父级捕获子级发出的事件.代码:
子组件
我在每个 上附加了一个点击事件监听器，它调用一个发出事件的函数.事件侦听器在父级上定义.
导出默认类 HorizontalNavigation {句柄点击(e){e.preventDefault();//console.log(e.target.dataset.section);this.$emit('ChangeView', e.target.dataset.section);}渲染(小时){返回 (<div class={ style.horizontalNavigation } ><div class={ style.sections }><ol><li><a on-click={ this.handleClick } href='#1' data-section='1' class='selected'>我们是</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'>案例</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'>职业生涯</a></li><li><a on-click={ this.handleClick } href='#6' data-section='6'>联系方式</a></li></ol><span class='filling-line' aria-hidden='true'></span>);}}
父组件
导出默认类 ViewsContainer {更改视图(数据){控制台日志(数据)；}渲染(小时){返回 (<div class={ style.restrictOverflow } ><水平导航/><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='职业生涯' id='5'/><SingleView dataSection='contact' id='6'/></main>);}}
按照 vue.js 语法，我应该能够通过从元素发出事件来监听来自父级的子事件，但父级似乎没有捕捉到该事件.
我哪里出错了?
你需要在你想要接收你的 $emit 的视图模型上$emit，使用一个bus 或使用 https://vuex.vuejs.org/.>
直接发送给父母
最简单的方法，就是从子组件直接$emit到父组件:
this.$parent.$emit('ChangeView', e.target.dataset.section);这是OK，但是如果您有很长的组件链，您需要$emit 到链中的每个$parent.
通过事件总线发出
您可以非常简单地使用 Vue 来创建全局事件总线.您在主组件中创建一个 Vue 实例，然后应用程序中的所有其他组件都可以发出事件给它，并使用 on 对这些事件做出反应.
var bus = new Vue({});var vm = new Vue({方法: {更改视图(){bus.$emit('ChangeView', e.target.dataset.section);}});也可以向 $root 发出，但不推荐这样做.但是，如果您的 app 确实变得非常复杂，您可能需要考虑使用 Vues 自己的状态管理系统，vuex，而是.
监听事件
您可以使用 $on 在视图模型中监听 $emit 并监听特定事件:
var vm = new Vue({创建(){this.$on('ChangeView', section => {控制台日志(部分)；});});这也与您使用总线类似，但您只需引用总线:
bus.$on('ChangeView', ...);你也可以使用 v-on 直接在你的 html 中使用它:
I'm pretty new to Vue.js, and I use ES6 syntax with 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. Code:
Child Component
I attached a click event listener on every <li>, which calls a function that emits an event. 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.
Where am I going wrong?
You need to $emit on the view model you want to receive your $emit, use a bus or use https://vuex.vuejs.org/.
Emitting to parent directly
The easiest way, is to simply $emit from the child directly to the parent component:
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.
Emiting via an Event Bus
You can use Vue to create a global event bus very simply. 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.
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. However, if your app does get quite complex you may want to consider using Vues own state management system, vuex, instead.
Listening for events
You can listen for the $emit in the viewmodel using $on and listening for the specific event:
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:
<div v-on:ChangeView="doSomething"></div>
这篇关于在 vue.js 中 $emit 从子到父的事件，es6 语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
