vue3第三部分--组件通信

title: 组件通信
date: 2025-01-28 12:00:00
tags:- 前端
categories:- 前端

组件通信

目标：重点学习父子组件与兄弟组件的通信方式，以及插槽的作用与使用方式

父子组件通信

主要是通过props和自定义事件来实现

1.1 父 -> 子通信（通过 Props）

父组件通过 props 将数据传递给子组件。

父组件

<template><ChildComponent :message="parentMessage" />
</template>
​
<script setup>
import ChildComponent from './ChildComponent.vue'
const parentMessage = "Hello from Parent"
</script>

子组件

<template><p>{{ message }}</p>
</template>
​
<script setup>
defineProps(['message'])
</script>

• 父组件通过 :message 将数据传递给子组件。

• 子组件使用 defineProps 接收父组件传递的 message。

1.2 子 -> 父通信（通过自定义事件）

子组件通过 $emit 触发事件，将数据发送给父组件。

父组件--

<template><ChildComponent @sendMessage="receiveMessage" /><p>父组件收到的消息：{{ message }}</p>
</template>
​
<script setup>
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue'
​
const message = ref('')
function receiveMessage(data) {message.value = data
}
</script>

子组件--

<template><button @click="sendToParent">发送消息给父组件</button>
</template>
​
<script setup>
import { ref } from 'vue'
​
const childMessage = ref('Hello from Child')
function sendToParent() {// 触发自定义事件，传递数据emit('sendMessage', childMessage.value)
}
defineEmits(['sendMessage'])
</script>

• 作用：

• 子组件通过 $emit 向父组件发送消息。

• 父组件通过 @sendMessage 监听子组件的事件，并处理接收到的数据。

2. 兄弟组件通信

兄弟组件之间的通信不能直接进行，需要通过 状态管理工具（如 Pinia、Vuex） 或 事件总线。

2.1 使用 Pinia（推荐方式）

Pinia 是 Vue 3 中推荐的状态管理工具。

定义一个store

// stores/messageStore.js
import { defineStore } from 'pinia'
​
export const useMessageStore = defineStore('messageStore', {state: () => ({message: ''}),actions: {setMessage(newMessage) {this.message = newMessage}}
})

兄弟组件 A（发送数据）

<template><button @click="sendMessage">发送消息</button>
</template>
​
<script setup>
import { useMessageStore } from '@/stores/messageStore'
​
const messageStore = useMessageStore()
​
function sendMessage() {messageStore.setMessage('Hello from Component A')
}
</script>

兄弟组件 B（接收数据）

<template><p>接收到的消息：{{ message }}</p>
</template>
​
<script setup>
import { useMessageStore } from '@/stores/messageStore'
​
const messageStore = useMessageStore()
const message = computed(() => messageStore.message)
</script>

使用 Pinia Store 作为共享状态，兄弟组件可以方便地访问和更新数据。

3. 插槽（Slots）

插槽是 Vue 中的一种机制，用于实现父组件向子组件传递 HTML 结构或动态内容。

3.1 基础插槽

父组件向子组件插入内容。

子组件

<template><div class="box"><slot></slot> <!-- 占位符 --></div>
</template>
​
<script setup></script>
​
<style>
.box {padding: 10px;border: 1px solid black;
}
</style>

父组件

<template><ChildComponent><p>这是插槽内容</p></ChildComponent>
</template><script setup>
import ChildComponent from './ChildComponent.vue'
</script>

父组件通过 <slot 将自定义内容插入到子组件中。

3.2 具名插槽

可以通过命名插槽向子组件的不同部分插入内容。

子组件

<template><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</template>

父组件

<template><ChildComponent><template #header><h1>这是头部内容</h1></template><p>这是默认插槽内容</p><template #footer><p>这是底部内容</p></template></ChildComponent>
</template>

3.3 作用域插槽

子组件将数据传递给插槽内容，父组件可以根据这些数据动态渲染内容。

<template><div><slot :data="message"></slot></div>
</template><script setup>
const message = "这是子组件的数据"
</script>

<template><ChildComponent><template #default="{ data }"><p>父组件接收到的数据：{{ data }}</p></template></ChildComponent>
</template><script setup>
import ChildComponent from './ChildComponent.vue'
</script>

子组件通过 slot 的 props 将数据传递给父组件。

• 父组件可以动态展示这些数据。