In Vue.js kann die Kommunikation zwischen übergeordneten und untergeordneten Komponenten über Requisiten und Ereignisse erreicht werden, während die Kommunikation zwischen Geschwisterkomponenten über eine gemeinsam genutzte übergeordnete Komponente oder die Verwendung der Vue-Instanz als Ereignisbus erreicht werden kann.
1. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente (übergeordnet an untergeordnet):
Verwenden Sie das Props-Attribut in der übergeordneten Komponente, um Daten an die untergeordnete Komponente zu übergeben, und die untergeordnete Komponente empfängt Daten über Requisiten.
<!-- 父组件 -->
<template>
<div>
<child-component :message="message"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello from parent'
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>2. Die untergeordnete Komponente überträgt Daten an die übergeordnete Komponente (von untergeordneter zu übergeordneter Komponente):
Verwenden Sie die Methode $emit in der untergeordneten Komponente, um ein benutzerdefiniertes Ereignis auszulösen, und die übergeordnete Komponente überwacht das Ereignis über die v-on-Anweisung.
<!-- 父组件 -->
<template>
<div>
<child-component @child-event="handleChildEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleChildEvent(data) {
console.log(data); // 子组件传递的数据
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<button @click="emitEvent">传递数据给父组件</button>
</div>
</template>
<script>
export default {
methods: {
emitEvent() {
this.$emit('child-event', 'Hello from child');
}
}
}
</script>3. Kommunikation zwischen Geschwisterkomponenten:
Wenn zwischen zwei Geschwisterkomponenten keine direkte Eltern-Kind-Beziehung besteht, können Sie den gemeinsamen Status über eine gemeinsam genutzte übergeordnete Komponente verwalten oder eine Vue-Instanz als Ereignisbus verwenden, um die Kommunikation zwischen Geschwisterkomponenten zu erreichen.
<!-- 共享的父组件 -->
<template>
<div>
<child-component1 :message="message" @update-message="updateMessage"></child-component1>
<child-component2 :message="message"></child-component2>
</div>
</template>
<script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';
export default {
components: {
ChildComponent1,
ChildComponent2
},
data() {
return {
message: 'Hello from parent'
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>
<!-- 子组件1 -->
<template>
<div>
<p>{
{ message }}</p>
<button @click="updateParentMessage">更新父组件数据</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
updateParentMessage() {
this.$emit('update-message', 'Updated message from child');
}
}
}
</script>
<!-- 子组件2 -->
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>Mit den oben genannten Methoden können Sie die Kommunikation zwischen übergeordneten und untergeordneten Komponenten und Geschwisterkomponenten in Vue.js realisieren.