vue親子コンポーネント通信の問題
1558 ワード
vueを使用する場合、親子コンポーネント間の通信が必要な場合は、公式ドキュメントを参照すると、サブコンポーネントがpropsオプションで所望のデータを明示的に宣言し、使用中に対応するデータを入力するだけでよいことがわかります.たとえば、次のようになります.
もちろん、これは簡単な例にすぎません.実際の使用中に、サブコンポーネントに転送データのタイプとデフォルト値を宣言することもできます.これらは説明を展開せず、公式ドキュメントを参照しても満足できる答えを見つけることができます.
vueではpropは一方向にバインドされます.親コンポーネントの属性が変化すると、サブコンポーネントに伝達されますが、逆にはなりません.これは、サブコンポーネントが親コンポーネントの状態を意図的に変更しないようにするためです.これにより、アプリケーションのデータ・ストリームが理解しにくくなります.したがって、サブコンポーネントで親コンポーネントにいくつかの情報を伝えるには、vm.$emitという別の方法が必要です.
以上は一般的な方法で、公式のドキュメントでも詳しく紹介されています.しかし、以前の使用中に、親コンポーネントでサブコンポーネントをトリガーする方法が必要でしたが、この場合どうすればいいですか?ドキュメントを参照するときに有効な方法は見つかりませんでした.その後、資料を参照すると、refを使用してサブコンポーネントにインデックスを指定し、インデックスを使用してサブコンポーネントのイベントを取得できます.例:
(end)
Vue.component('child', {
// props
props: ['message'],
// data ,prop
// vm “this.message”
template: '{{ message }}'
})
もちろん、これは簡単な例にすぎません.実際の使用中に、サブコンポーネントに転送データのタイプとデフォルト値を宣言することもできます.これらは説明を展開せず、公式ドキュメントを参照しても満足できる答えを見つけることができます.
vueではpropは一方向にバインドされます.親コンポーネントの属性が変化すると、サブコンポーネントに伝達されますが、逆にはなりません.これは、サブコンポーネントが親コンポーネントの状態を意図的に変更しないようにするためです.これにより、アプリケーションのデータ・ストリームが理解しにくくなります.したがって、サブコンポーネントで親コンポーネントにいくつかの情報を伝えるには、vm.$emitという別の方法が必要です.
Vue.component('child', {
// props
props: ['message'],
// data ,prop
// vm “this.message”
template: '{{ message }}',
methods: {
triggerEvent() {
//
this.$emit('eventName', args)
}
}
})
以上は一般的な方法で、公式のドキュメントでも詳しく紹介されています.しかし、以前の使用中に、親コンポーネントでサブコンポーネントをトリガーする方法が必要でしたが、この場合どうすればいいですか?ドキュメントを参照するときに有効な方法は見つかりませんでした.その後、資料を参照すると、refを使用してサブコンポーネントにインデックスを指定し、インデックスを使用してサブコンポーネントのイベントを取得できます.例:
this.$refs.child.childEventName
//
(end)