$ emittieren ein Ereignis von Kind zu Eltern in vue.js, es6 Syntax

Question

Ich bin ziemlich neu in Vue.js, und ich benutze Es6-Syntax mit Vue-Klasse-Komponente. Ich habe ein Problem, während ich versuche, ein Ereignis von einem Kind an seine Eltern zu senden. Ich folgte der Logik der Standard-Vue.js-Syntax, kann sie aber nicht hinter mich bringen. Hier sind einige weitere Informationen:

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

Hier ist das Kind. Ich klickte jeden li an, um ihn an den Elternteil zu übergeben. Und hier ist das Elternteil.

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

Nach der vue.js Syntax, soll ich in der Lage sein, auf das Childs Ereignis aus dem Elternteil zu hören durch das Ereignis an das Element passiert, eine @ChangeView wie, jedoch durch Komponente aber Requisiten nichts reist ... Irgendwelche Gedanken dazu? Vielen Dank !

Answer 1

Sie müssen $emit auf das Ansichtsmodell, das Sie erhalten möchten $emit, verwenden Sie eine bus oder verwenden Sie https://vuex.vuejs.org/en/intro.html.

Der einfachste Weg ist, einfach direkt an die Eltern $ emittieren:

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

Das ist in Ordnung, aber wenn Sie haben eine lange Kette von Komponenten, die Sie zu jedem $parent in der Kette $emit müssen.

Eine weitere Option ist als Vue vm als Bus zu verwenden, indem Sie den Bus in der Hauptkomponente platzieren und emiting auf sie:

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

Es ist auch möglich zu $root auszusenden, aber dies wird nicht empfohlen. Wenn Ihre app jedoch sehr komplex wird, sollten Sie stattdessen das eigene Statusverwaltungssystem von Vue verwenden, vuex.

Sie können für die $emit in dem Viewmodel hören $on mit und für den spezifischen Fall hören:

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

Dies auch ähnlich sein würde, ist man mit dem Bus verwendet hat, aber Sie würden Referenz nur mit dem Bus statt:

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

Und Sie können es auch direkt in Ihrem hTML verwenden mit `v-on:

<div v-on:ChangeView="doSomething"></div>