私は Vue.js に非常に興味があり、普段取り組んでいる技術スタックも Vue.js なので、ここ数か月間 Vue.js のソース コードを勉強し、まとめとアウトプットを作成しました。コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。この記事では、Vue.js コンポーネントのコミュニケーションに関するいくつかの姿勢を紹介しますので、興味のある方はぜひご覧ください。
前に書いてあります
理解にズレがあるかもしれませんが、問題提起や指摘を歓迎し、一緒に学び、一緒に進歩してください。
Vue コンポーネントとは何ですか?
コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式を取ることもできます。
Vue コンポーネント間の通信
親コンポーネントは子コンポーネントと通信します
方法 1: props
props を使用すると、親コンポーネントは props を使用して子コンポーネントにデータを渡すことができます。
親コンポーネントの vue テンプレート Father.vue
<template> <child :msg="message"></child> </template> <script> import child from './child.vue'; export default { components: { child }, data () { return { message: 'father message'; } } } </script>
子コンポーネントの vue テンプレート child.vue
<template> <p>{{msg}}</p> </template> <script> export default { props: { msg: { type: String, required: true } } } </script>
方法 2 $children を使用する
$children を使用して、親コンポーネント内の子コンポーネントにアクセスします。
子コンポーネントは親コンポーネントと通信します
方法 1: vue イベントを使用する
親コンポーネントはイベント メソッドを子コンポーネントに渡し、子コンポーネントは $emit を通じてイベントをトリガーし、親コンポーネントにコールバックします。
親コンポーネントの Vue テンプレート Father.vue
<template> <child @msgFunc="func"></child> </template> <script> import child from './child.vue'; export default { components: { child }, methods: { func (msg) { console.log(msg); } } } </script>
子コンポーネントの Vue テンプレート child.vue
<template> <button @click="handleClick">点我</button> </template> <script> export default { props: { msg: { type: String, required: true } }, methods () { handleClick () { //........ this.$emit('msgFunc'); } } } </script>
方法 2: 親コンポーネントによって渡された props を変更して、親コンポーネントのデータを変更します
このメソッドは、への参照のみを渡すことができます。親コンポーネント 変数を使用する場合に使用できますが、リテラル変数では対応する効果を得ることができません。飲酒変数は、親コンポーネント内のデータであっても、子コンポーネントによって取得された props 内のデータであっても、最終的には同じメモリ アドレスを指すため、子コンポーネント内の props 内のデータを変更すると、親コンポーネント内のデータも変更されます。成分。
ただし、変更を表示するためにデータを使用する場合は、props の値を直接変更することはお勧めできません。実際の開発では、それをデータに入れて親コンポーネントに返すことがよくあります。次に、イベントを使用してデータを返します。これにより、コンポーネントの独立性と分離性が維持され、同じデータの使用による異常なデータ フローの混乱が発生せず、データを変更するために特定のインターフェイスを介してのみデータが送信され、内部データのステータスは専用のデータによって管理されます。
方法 3: $parent を使用する
$parent を使用して、親コンポーネントのデータにアクセスします。
非親子コンポーネントと兄弟コンポーネント間のデータ転送
非親子コンポーネント通信では、Vue は中央イベント バスとして Vue インスタンスを使用することを公式に推奨しています。
Vue には内部イベント機構があり、ソースコードを参照できます。
$on メソッドはイベントをリッスンするために使用されます。
$emit はイベントをトリガーするために使用されます。
/*新建一个Vue实例作为中央事件总嫌*/ let event = new Vue(); /*监听事件*/ event.$on('eventName', (val) => { //......do something }); /*触发事件*/ event.$emit('eventName', 'this is a message.');
マルチレベルの親子コンポーネント通信:
Vue1.0 では、子コンポーネント (または親コンポーネント) にブロードキャスト (またはディスパッチ) するための 2 つのメソッド $broadcast と $dispatch が実装されています。イベントがリッスンされて true が返されると、イベントは引き続き孫レベルのコンポーネントにブロードキャスト (またはディスパッチ) されます。ただし、このメソッドは Vue2.0 では削除されました。
Ele.meのオープンソースのコンポーネントライブラリ要素を勉強していたら、ブロードキャストメソッドとディスパッチメソッドが再実装され、ミックスインの形で導入されていることが分かりました。詳しくは「要素コンポーネントライブラリのブロードキャストとディスパッチメソッドについての話」を参照してください。急送"。ただし、Vue1.0 の 2 つのメソッド実装とは少し異なります。これら 2 つのメソッドは、子孫コンポーネントへのイベント ブロードキャストと、マルチレベルの親コンポーネントへのイベント ディスパッチの機能を実装します。ただし、これは広義のイベント ブロードキャストではありません。commentName を指定して、指定したコンポーネント名を持つコンポーネントにイベントをブロードキャスト (ディスパッチ) する必要があります。
実際、これら 2 つのメソッドの内部実装では、引き続き $parent と $children が使用されます。これらは、子ノードを段階的に走査したり、親ノードをクエリしたりするために使用されます。指定されたコンポーネント名にアクセスすると、$emit が呼び出されて、指定されたイベント。
複雑なシングルページアプリケーションのデータ管理
アプリケーションが十分に複雑な場合は、データ管理に vuex を使用してください。
関連する推奨事項:
vue でのイベントバスの非親子コンポーネント通信の詳細な説明
Vue.js コンポーネントとコンポーネント通信についての詳細な説明
以上がVue.jsコンポーネント通信例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。