Analisis skema kemas kini data dalam komunikasi komponen Vue

Analisis skema kemas kini data dalam komunikasi komponen Vue

Dalam pembangunan Vue, komunikasi komponen memainkan peranan penting. Dalam komunikasi komponen, kemas kini data adalah pautan penting. Artikel ini akan menganalisis skema kemas kini data dalam komunikasi komponen Vue dan menggambarkannya melalui contoh kod.

1. Komunikasi komponen ibu bapa-anak

Dalam komunikasi komponen ibu bapa-anak, komponen induk boleh menghantar data kepada komponen anak melalui prop, dan komponen anak boleh menghantar data kepada komponen induk melalui acara $emit.

Contoh kod:

// Komponen induk App.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

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

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2script>
ChildComponent.vue';

eksport lalai {

komponen: {

ChildComponent

},

data() {

return {
  message: 'Hello World'
}

},

kaedah: {

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

}

}
Komponen ChildComponent.vue

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

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

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

855348821b2e8f2cc4b633bf98f064df
kaedah eksport lalai: ['
props': {]

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

}

}

2cacc6d41bbb37262a98f745aa00fbf0

Dalam contoh ini, komponen induk menghantar atribut mesej kepada komponen anak melalui prop. Apabila komponen anak mengklik butang, acara kemas kini dihantar kepada komponen induk melalui acara $emit dan "Hello Vue" dihantar sebagai data. Selepas kaedah handleUpdate dalam komponen induk menerima data, ia memberikannya kepada mesej, dengan itu mengemas kini data.

Komunikasi komponen adik beradik

2. Dalam komunikasi komponen adik beradik, anda boleh menentukan data dalam komponen induk biasa, dan kemudian mengemas kini data melalui prop dan acara masing-masing.

Contoh kod:

// Komponen induk App.vue

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

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

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

d477f9ce7bf77f53fbcf36bec1b69b7a
ChildComponent1.vue';
import ChildComponent2 daripada './ChildComponent2.vue';

eksport lalai {

komponen: {

ChildComponent1,
ChildComponent2

},

data() {

rreee
},

kaedah semula:

rr:
}

2cacc6d41bbb37262a98f745aa00fbf0

// Child component ChildComponent1.vue
d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

return {
  message: 'Hello World'
}

16b28748ea4df4d9c2150843fecfba68
2cacc6d41bbb37262a98f745aa00fbf0>export

2cacc6d41bbb37262a98f745aa00fbf0 lalai> props: ['message'],

kaedah: {

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

}
}
2cacc6d41bbb37262a98f745aa00fbf0

// Child component ChildComponent2.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b
dc6dce4a544fdca2df29d5ac0ea9906b

;

21c97d3a051048b8e55e3c8f199a54b2
855348821b2e8f2cc4b633bf98f064df
eksport lalai {

prop: ['message']

}
2cacc6d41bbb37262a98f745aa00fbf0

Dalam contoh ini, data mesej ditakrifkan dalam komponen induk App.vue , dan menyerahkannya kepada dua sub-komponen ChildComponent1 dan ChildComponent2. Apabila ChildComponent1 mengklik butang, acara mesej kemas kini dihantar kepada komponen induk melalui acara $emit dan "Hello Vue" dihantar sebagai data. Selepas kaedah handleUpdateMessage dalam komponen induk menerima data, ia memberikannya kepada mesej. Memandangkan ChildComponent2 juga terikat pada sifat mesej, ChildComponent2 akan mengemas kini paparan secara automatik apabila mesej dikemas kini.

Ringkasan

Melalui prop dan acara, kami boleh mengemas kini data dalam komunikasi komponen Vue. Dalam komunikasi komponen ibu bapa-anak, komponen induk menghantar data kepada komponen anak melalui prop dan komponen anak menghantar permintaan untuk mengemas kini data kepada komponen induk melalui acara $emit. Dalam komunikasi komponen adik-beradik, anda boleh menentukan data dalam komponen induk biasa, dan kemudian mengemas kini data melalui prop dan acara. Penyelesaian kemas kini data ini telah digunakan secara meluas dalam pembangunan Vue sebenar, membantu kami melaksanakan komunikasi komponen dan kemas kini data dengan lebih baik.

Atas ialah kandungan terperinci Analisis skema kemas kini data dalam komunikasi komponen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!