$émettent un événement d'un enfant à un parent dans vue.js, es6 syntaxe

Je suis assez nouveau à Vue.js et j'utilise es6 syntaxe avec vue-classe-composant. Je vais avoir un problème en essayant d'émettre un événement à partir d'un enfant à son parent. J'ai suivi la logique de la valeur par défaut Vue.js la syntaxe, mais ne peut pas se passer. Voici quelques infos :

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

Ici est l'enfant. J'ai attaché un clic sur chaque li de les transmettre à la société mère. Et ici, c'est le parent.

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

À la suite de la vue.js la syntaxe, je devrais être à l'écoute de l'enfant de l'événement de la mère en passant par le cas de l'élément comme avoir un @ChangeView mais rien n'est voyager à travers les composant, mais les accessoires...
Tout thougts sur qui ? Merci!!!!

OriginalL'auteur Lou | 2016-10-28

  1. 28

    Vous devez $emit sur le modèle de vue que vous souhaitez recevoir votre $emit, utiliser un bus ou de l'utilisation https://vuex.vuejs.org/en/intro.html.

    La façon la plus simple, est de simplement $émettent directement à la société mère:

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

    C'est OK, mais si vous avez une longue chaîne de composants dont vous avez besoin pour $emit à chaque $parent dans la chaîne.

    Une autre option est d'utiliser comme Vue vm comme un bus en plaçant le bus dans votre composante principale et emiting sur elle:

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

    Il est également possible d'émettre à $root mais ce n'est pas recommandé. Toutefois, si votre app est assez complexe, vous pouvez utiliser des Vues propres de l'état du système de gestion, vuex, à la place.

    Vous pouvez écouter de la $emit dans le viewmodel à l'aide de $on et à l'écoute de l'événement spécifique:

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

    Ce serait également similaire, vous avez été en utilisant le bus, mais vous serait tout simplement la référence de l'autobus au lieu de cela:

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

    Et vous pouvez également l'utiliser directement dans votre code html à l'aide de v sur:

    <div v-on:ChangeView="doSomething"></div>
    Merci Craig ! Mais comment voulez-vous écouter sur le parent, je ne peux pas obtenir quoi que ce soit à venir à travers...
    Merci beaucoup Craig ! J'ai aussi fait une erreur en mettant sur ChangeView écouteur sur le parent et non pas sur l'instance elle-même. Donc, ce qui a résolu mon problème a été de faire : <HorizontalNavigation sur-ChangeView={ présent.ChangeView } /> dans ViewsContainer. Merci encore pour votre temps !
    Qu'est-ce que ChangeView ici ?

    OriginalL'auteur craig_h