<template id="parentComp">
<child-comp-1 @customEvent="handler"/>
<child-comp-2 @customEvent="handler"/>
</template>
私は同じイベントを受け取り、両方のイベントに同じイベントハンドラを使用するので、それらを共通にリッスンする方法はありますか?つまり、イベントをネイティブイベントのようにバブルアップさせて、
<template id="parentComp" @customEvent="handler">
回答 2 件
イベントバブリングに$listenersを使用できます。例を挙げてください
Vue.component('inner-com',{ template: '<div>inner component<button @click="innerClick">emit event</button></div>', methods: { innerClick () { this.$emit('inner-com-click-event'); } } }) Vue.component('middle-com',{ template: '<div>middle component<inner-com v-on="$listeners"></inner-com></div>' }) Vue.component('outer-com',{ template: '<div>outer component<middle-com v-on="$listeners"></middle-com></div>' }) var app = new Vue({ el:'#app', methods: { eventHandler () { alert('event receved') } } })
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="app"> <outer-com @inner-com-click-event="eventHandler"></outer-com> </div>
関連記事
- 'navigation' AND'props 'を子コンポーネントに渡す
- ViewAnimatorのアニメーションイベントの終わりをリッスンします
- Model Ionic内でdismissイベントをリッスンするにはどうすればよいですか
- vue jsで小道具を使用して子コンポーネントのプロパティを更新する方法は?
- Firebase:クエリと子イベントリスナーを組み合わせる
- EXTJSでツリーパネルの最後の子要素のみをクリックしたときにイベントを発生させる方法
- 親コンポーネントのクリックイベントから子コンポーネント関数を呼び出す方法が必要
- リストビューアイテムビューの子ビューのクリックイベントを処理する方法
- 複数の子コンポーネントが1から別のアクションを呼び出す
イベントを親に渡すだけでなく、イベントバスを使用できます。この記事では、この原則について詳しく説明しています:https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860
アイデアは、共有Vueインスタンスを使用してイベントを処理することです。次に、ライブラリをインポートするのと同じ方法で、このインスタンスを異なる要素にインポートします。