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
script>
ChildComponent.vue';

eksport lalai {

komponen: {

ChildComponent

},

data() {

return {
  message: 'Hello World'
}

},

kaedah: {

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

}

}
Komponen ChildComponent.vue

kaedah eksport lalai: ['
props': {]

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

}

}

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

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