Vueコンポーネント通信におけるデータ更新スキームの解析

Vue コンポーネント通信におけるデータ更新スキームの分析

Vue 開発において、コンポーネント通信は重要な役割を果たします。コンポーネント通信において、データの更新は不可欠なリンクです。この記事では、Vue コンポーネント通信におけるデータ更新スキームを分析し、コード例を通して説明します。

1. 親子コンポーネント通信

親子コンポーネント通信では、親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントはデータを送信できます。イベント $emit を通じて親コンポーネントに送信します。

コード例:

// 親コンポーネント App.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component :message="message" @update="handleUpdate"></child-component>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
'./ChildComponent.vue' から ChildComponent をインポート;

デフォルトの {
コンポーネントをエクスポート: {

ChildComponent

} ,
data() {

return {
  message: 'Hello World'
}

},
メソッド: {

handleUpdate(data) {
  this.message = data;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

/ / ChildComponentChildComponent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="sendMessage">发送消息</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート{
props: ['message'],
メソッド: {

sendMessage() {
  this.$emit('update', 'Hello Vue');
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

この例では、親コンポーネントは、props を通じて子コンポーネントに message 属性を渡します。子コンポーネントがボタンをクリックすると、イベント $emit を通じて更新イベントが親コンポーネントに送信され、データとして「Hello Vue」が渡されます。親コンポーネントの handleUpdate メソッドはデータを受信すると、それをメッセージに割り当てて、データを更新します。

2. 兄弟コンポーネント通信

兄弟コンポーネント通信では、共通の親コンポーネントでデータを定義し、props とイベントを通じてそれぞれデータを更新できます。

コード例:

// 親コンポーネント App.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component1 :message="message" @update-message="handleUpdateMessage"></child-component1>
<child-component2 :message="message"></child-component2>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
'./ChildComponent1.vue' から ChildComponent1 をインポート;
'./ChildComponent2.vue' から ChildComponent2 をインポート;

デフォルトのエクスポート {
コンポーネント: {

ChildComponent1,
ChildComponent2

},
data() {

return {
  message: 'Hello World'
}

},
メソッド: {

handleUpdateMessage(data) {
  this.message = data;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

// 子コンポーネント ChildComponent1.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="sendMessage">发送消息</button>

16b28748ea4df4d9c2150843fecfba68
e4c6f86f35e644cc6377923835cf3ded
3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {
props: ['message'],
メソッド: {

sendMessage() {
  this.$emit('update-message', 'Hello Vue');
}

}
}
< ;/script>

// 子コンポーネント ChildComponent2.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<p>{{ message }}</p>

16b28748ea4df4d9c2150843fecfba68
3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {
props: ['message']
}
2cacc6d41bbb37262a98f745aa00fbf0

この例では、親コンポーネント Appメッセージ データは .vue で定義され、2 つのサブコンポーネント ChildComponent1 と ChildComponent2 に渡されます。 ChildComponent1 がボタンをクリックすると、イベント $emit を通じて更新メッセージ イベントが親コンポーネントに送信され、データとして「Hello Vue」が渡されます。親コンポーネントの handleUpdateMessage メソッドはデータを受信すると、それをメッセージに割り当てます。 ChildComponent2 はメッセージ プロパティにもバインドされているため、メッセージが更新されると、ChildComponent2 は表示を自動的に更新します。

概要

プロパティとイベントを通じて、Vue コンポーネント通信のデータを更新できます。親子コンポーネント通信では、親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントはイベント $emit を通じてデータ更新リクエストを親コンポーネントに送信します。兄弟コンポーネント通信では、共通の親コンポーネントでデータを定義し、props とイベントを通じてデータを更新できます。これらのデータ更新ソリューションは実際の Vue 開発で広く使用されており、コンポーネント通信とデータ更新をより適切に実装するのに役立ちます。

以上がVueコンポーネント通信におけるデータ更新スキームの解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。