형제 자매 구성 요소 Vue.JS에서 구성 요소 데이터의 상태를 변경 2.0

Question

을 감안할 때 :

<parent-element> 
    <sibling-a></sibling-a> 
    <sibling-b></sibling-b> 
</parent-element> 

가 어떻게 사용, 형제-B에서 또 다른 일부 값을 변경 siblingA에있는 버튼을 클릭 이벤트에 액세스 할 수 있습니다 $ 방출?

Answer 1

이를 위해 당신은 단순히 글로벌 버스를 사용할 수 있으며 그에게 이벤트를 방출 :

여기

var bus = new Vue(); 

Vue.component('comp-a', { 
    template: `<div><button @click="emitFoo">Click Me</button></div>`, 
    methods: { 
    emitFoo() { 
     bus.$emit('foo'); 
    } 
    } 
}); 

Vue.component('comp-b', { 
    template: `<div>{{msg}}</div>`, 
    created() { 
    bus.$on('foo',() => { 
     this.msg = "Got Foo!"; 
    }) 
    }, 
    data() { 
    return { 
     msg: 'comp-b' 
    } 
    } 
}); 

가 JSFiddle입니다 : https://jsfiddle.net/6ekomf2c/

당신은 당신이 봐야 더 복잡한 작업을 수행 할 필요가있는 경우 Vuex

Answer 2

@craig_h가 정확한지, 또는 당신은 같은 $의 심판을 사용할 수 있습니다

<parent-element> 
    <sibling-a @onClickButton="changeCall"></sibling-a> 
    <sibling-b ref="b"></sibling-b> 
</parent-element> 

siblingA에서

methods: { 
    changeCall() { 
     this.$refs.b.dataChange = 'changed'; 
    } 
    } 

:

Vue.component('sibling-a', { 
    template: `<div><button @click="clickMe">Click Me</button></div>`, 
    methods: { 
    clickMe() { 
     this.$emit('onClickButton'); 
    } 
    } 
}); 

siblingB 물 :

Vue.component('sibling-b', { 
    template: `<div>{{dataChange}}</div>`, 
    data() { 
    return { 
     dataChange: 'no change' 
    } 
    } 
}); 

상위 방법에서