在 Vue.js 中，父子组件之间的通信可以通过 props 和事件来实现，而兄弟组件之间的通信可以通过一个共享的父组件或使用 Vue 实例作为事件总线来实现。
1. 父组件向子组件传递数据（父传子）：
在父组件中使用 props 属性给子组件传递数据，子组件通过 props 接收数据。
<!-- 父组件 -->
<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. 子组件向父组件传递数据（子传父）：
在子组件中使用 $emit 方法触发一个自定义事件，父组件通过 v-on 指令监听该事件。
<!-- 父组件 -->
<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. 兄弟组件之间的通信：
如果两个兄弟组件没有直接的父子关系，可以通过一个共享的父组件或使用 Vue 实例作为事件总线来管理共享的状态，从而实现兄弟组件之间的通信。
<!-- 共享的父组件 -->
<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>通过以上方法，你可以在 Vue.js 中实现父子组件和兄弟组件之间的通信。