当前位置: 首页 > article >正文

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 将数据传递给父组件。

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


http://www.kler.cn/a/526311.html

相关文章:

  • Deepseek技术浅析(二):大语言模型
  • Java 分布式与微服务架构:现代企业应用开发的新范式
  • AI在自动化测试中的伦理挑战
  • Origami Agents:AI驱动的销售研究工具,助力B2B销售团队高效增长
  • 中间件安全
  • 《一文读懂!Q-learning状态-动作值函数的直观理解》
  • 【2024年华为OD机试】 (C卷,100分)- 最大括号深度(Java JS PythonC/C++)
  • python开发,最好的环境是什么
  • ThreadLocal源码解析
  • 5.3.2 软件设计原则
  • [JavaWeb]搜索表单区域
  • Windows11暂停自动更新
  • (二)PosrgreSQL: Python3 连接Pgvector出错排查
  • 巴塞尔问题详解:计算所有正整数平方的倒数之和
  • DeepSeek R1本地部署详细指南
  • Java 性能优化与新特性
  • [OO ALV] OO ALV 基础显示
  • allegro修改封闭图形线宽
  • 独立成分分析 (ICA):用于信号分离或降维
  • wordpress外贸独立站常用询盘软件
  • Rust语言进阶之enumerate用法实例(九十六)
  • 第33篇:Python开发进阶:自然语言处理与文本分析
  • Java继承中的静态方法隐藏与实例变量隐藏:深入解析与最佳实践
  • 年化19.3%策略集|ctpbee_api替换成openctp整合backtrader实盘方案(代码+数据)
  • 大厂面试题备份20250129
  • dify实现原理分析-rag-检索(Retrieval)服务的实现