制作移动端网站价格,建筑网站免费,深圳营销型网站建设方案服务商,常德市建设局网站title: 组件通信
date: 2025-01-28 12:00:00
tags:- 前端
categories:- 前端组件通信
目标#xff1a;重点学习父子组件与兄弟组件的通信方式#xff0c;以及插槽的作用与使用方式
父子组件通信
主要是通过props和自定义事件来实现
1.1 父 - 子通信#xff08;通过 …title: 组件通信
date: 2025-01-28 12:00:00
tags:- 前端
categories:- 前端组件通信
目标重点学习父子组件与兄弟组件的通信方式以及插槽的作用与使用方式
父子组件通信
主要是通过props和自定义事件来实现
1.1 父 - 子通信通过 Props
父组件通过 props 将数据传递给子组件。
父组件
templateChildComponent :messageparentMessage /
/template
script setup
import ChildComponent from ./ChildComponent.vue
const parentMessage Hello from Parent
/script
子组件
templatep{{ message }}/p
/template
script setup
defineProps([message])
/script
• 父组件通过 :message 将数据传递给子组件。
• 子组件使用 defineProps 接收父组件传递的 message。
1.2 子 - 父通信通过自定义事件
子组件通过 $emit 触发事件将数据发送给父组件。
父组件--
templateChildComponent sendMessagereceiveMessage /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
子组件--
templatebutton clicksendToParent发送消息给父组件/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发送数据
templatebutton clicksendMessage发送消息/button
/template
script setup
import { useMessageStore } from /stores/messageStore
const messageStore useMessageStore()
function sendMessage() {messageStore.setMessage(Hello from Component A)
}
/script
兄弟组件 B接收数据
templatep接收到的消息{{ 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 基础插槽
父组件向子组件插入内容。
子组件
templatediv classboxslot/slot !-- 占位符 --/div
/template
script setup/script
style
.box {padding: 10px;border: 1px solid black;
}
/style
父组件
templateChildComponentp这是插槽内容/p/ChildComponent
/templatescript setup
import ChildComponent from ./ChildComponent.vue
/script
父组件通过 slot 将自定义内容插入到子组件中。
3.2 具名插槽
可以通过命名插槽向子组件的不同部分插入内容。
子组件
templateheaderslot nameheader/slot/headermainslot/slot/mainfooterslot namefooter/slot/footer
/template
父组件
templateChildComponenttemplate #headerh1这是头部内容/h1/templatep这是默认插槽内容/ptemplate #footerp这是底部内容/p/template/ChildComponent
/template
3.3 作用域插槽
子组件将数据传递给插槽内容父组件可以根据这些数据动态渲染内容。
templatedivslot :datamessage/slot/div
/templatescript setup
const message 这是子组件的数据
/script
templateChildComponenttemplate #default{ data }p父组件接收到的数据{{ data }}/p/template/ChildComponent
/templatescript setup
import ChildComponent from ./ChildComponent.vue
/script
子组件通过 slot 的 props 将数据传递给父组件。
• 父组件可以动态展示这些数据。
