Vue コンポーネント通信: カスタム イベント リスニングに $on を使用する
Vue では、コンポーネントは独立しており、各コンポーネントは独自のライフサイクルとデータを持っています。しかし、実際の開発プロセスではコンポーネント間の通信は避けられません。 Vue は、コンポーネント通信の非常に柔軟かつ効率的な方法、つまりカスタム イベント リスニングを提供します。
Vue のカスタム イベント リスニング メカニズムは、パブリッシュ/サブスクライブ モデルに基づいて実装されています。 Vue インスタンスの $on メソッドを使用して 1 つのコンポーネントでカスタム イベントをリッスンし、$emit メソッドを通じて他のコンポーネントでイベントをトリガーできます。以下では、$on を使用してカスタム イベントを監視する方法を詳しく紹介します。
まず、単純な親子コンポーネントの例を作成しましょう。親コンポーネントは App.vue、子コンポーネントは Child.vue です。
App.vue:
<template> <div> <h2>App Component</h2> <button @click="notifyChild">通知子组件</button> <Child></Child> </div> </template> <script> import Child from './Child.vue'; export default { name: 'App', components: { Child }, methods: { notifyChild() { this.$emit('customEvent', 'Hello Child Component!'); } } } </script>
Child.vue:
<template> <div> <h2>Child Component</h2> <p>{{ message }}</p> </div> </template> <script> export default { name: 'Child', data() { return { message: '' } }, mounted() { this.$parent.$on('customEvent', this.handleCustomEvent); }, beforeDestroy() { this.$parent.$off('customEvent', this.handleCustomEvent); }, methods: { handleCustomEvent(message) { this.message = message; } } } </script>
親コンポーネント App.vue で、ボタン customEvent# をクリックしてカスタム イベントをトリガーします。 ## し、子コンポーネントにメッセージを渡します。
this.$parent.$on メソッドを使用して、親コンポーネントのカスタム イベントをリッスンします
カスタムイベント。そして、beforeDestroy ライフサイクル フック関数の
this.$parent.$off メソッドを使用して、リスニングをキャンセルします。メソッド
handleCustomEvent では、親コンポーネントから渡されたメッセージを子コンポーネントのメッセージに割り当てます。
this.$on を使用してカスタム イベントをリッスンし、次に
this.$emit を使用して他のコンポーネントでイベントをトリガーするだけです。
以上がVue コンポーネント通信: カスタム イベント リスニングに $on を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。