Vue.js 2.0 では、孫コンポーネントからその親コンポーネントにイベントが発行されないようです。
Vue.component('parent', {
template: '<div>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>',
data(){
return {
action: 'No action'
}
},
methods: {
performAction() { this.action = 'actionDone' }
}
})
Vue.component('child', {
template: '<div>I am the child <grand-child></grand-child></div>'
})
Vue.component('grand-child', {
template: '<div>I am the grand-child <button @click="doEvent">Do Event</button></div>',
methods: {
doEvent() { this.$emit('eventtriggered') }
}
})
new Vue({
el: '#app'
})
このJsFiddleは問題を解決しますhttps://jsfiddle.net/y5dvkqbd/4/、2つのイベントを発行することによって:
- 孫から中間コンポーネントまで1つ
- そして中間コンポーネントから祖父母に再び放出する
この中間イベントを追加するのは、繰り返しが多くて不必要に思えます。私が知らない、祖父母に直接発行する方法はありますか?
ベストアンサー1
Vue 2.4では、イベントを階層の上位に簡単に渡す方法が導入されました。vm.$listeners
からhttps://v2.vuejs.org/v2/api/#vm-listeners:
親スコープの
v-onイベント リスナー (.native修飾子なし) が含まれます。これは、 を介して内部コンポーネントに渡すことができます。v-on="$listeners"透明なラッパー コンポーネントを作成するときに便利です。
テンプレートのコンポーネントv-on="$listeners"で使用している以下のスニペットを参照してください。grand-childchild
Vue.component('parent', {
template:
'<div>' +
'<p>I am the parent. The value is {{displayValue}}.</p>' +
'<child @toggle-value="toggleValue"></child>' +
'</div>',
data() {
return {
value: false
}
},
methods: {
toggleValue() { this.value = !this.value }
},
computed: {
displayValue() {
return (this.value ? "ON" : "OFF")
}
}
})
Vue.component('child', {
template:
'<div class="child">' +
'<p>I am the child. I\'m just a wrapper providing some UI.</p>' +
'<grand-child v-on="$listeners"></grand-child>' +
'</div>'
})
Vue.component('grand-child', {
template:
'<div class="child">' +
'<p>I am the grand-child: ' +
'<button @click="emitToggleEvent">Toggle the value</button>' +
'</p>' +
'</div>',
methods: {
emitToggleEvent() { this.$emit('toggle-value') }
}
})
new Vue({
el: '#app'
}).child {
padding: 10px;
border: 1px solid #ddd;
background: #f0f0f0
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<parent></parent>
</div>