$ vue.js, es6 구문에서 자식에서 부모로 이벤트를 내 보냅니다.

Question

저는 Vue.js에 익숙하지 않고 vue-class-component에서 es6 구문을 사용합니다. 나는 부모로부터 자식에게 이벤트를 내보내려고 할 때 문제가 있습니다. 나는 기본 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에 클릭을 붙여 부모에게 전달했습니다. 그리고 여기에 부모님이 있습니다. vue.js 구문에 따라

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

, 나는 ... @ChangeView을 가지고 있지만, 아무것도 요소이지만 소품을 통해 여행하지 것처럼 요소에 이벤트를 전달하여 부모로부터 차일 이벤트를 수신 할 수 있어야한다 그걸로 아무 생각 없니? 고맙습니다 !

Answer 1

$emit을 받고 싶은 뷰 모델에 $emit이 필요하면 bus을 사용하거나 https://vuex.vuejs.org/en/intro.html을 사용하십시오.

가장 쉬운 방법은, 단순히 $ 부모에 직접 방출입니다 :

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

이 OK,하지만 당신은 체인의 각 $parent에 $emit에 필요한 구성 요소의 긴 체인이있는 경우.

또 다른 옵션은 그것에 당신의 주요 구성 요소에 버스를 배치하여 및 emiting 버스로 Vue VM으로 사용하는 것입니다 : 또한 $root에 방출하는 것이 가능하지만이 권장되지 않습니다

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

. 그러나 app이 꽤 복잡한 경우에는 Vues 자체 상태 관리 시스템 vuex을 대신 사용해보십시오.

당신은 $on를 사용하여 특정 이벤트를 수신하는 뷰 모델에 $emit 수신 할 수 있습니다 :

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

이것은 또한 당신이 버스를 사용하고있다 유사하다, 그러나 당신이 버스를 대신 참조 만 것입니다 :

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

그리고 당신은 또한 V-에`사용하여 HTML에서 직접 사용할 수 있습니다 :

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