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

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

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

相关文章:

vue3第三部分--组件通信

title: 组件通信 date: 2025-01-28 12:00:00 tags:- 前端 categories:- 前端组件通信 目标&#xff1a;重点学习父子组件与兄弟组件的通信方式&#xff0c;以及插槽的作用与使用方式 父子组件通信 主要是通过props和自定义事件来实现 1.1 父 -> 子通信&#xff08;通过 …...

DeepSeek R1-Zero vs. R1:强化学习推理的技术突破与应用前景

&#x1f4cc; 引言&#xff1a;AI 推理的新时代 近年来&#xff0c;大语言模型&#xff08;LLM&#xff09; 的规模化扩展成为 AI 研究的主流方向。然而&#xff0c;LLM 的扩展是否真的能推动 通用人工智能&#xff08;AGI&#xff09; 的实现&#xff1f;DeepSeek 推出的 R1…...

matlab提取滚动轴承故障特征

为了精准、稳定地提取滚动轴承故障特征&#xff0c;提出了基于变分模态分解和奇异值分解的特征提取方法&#xff0c;采用标准模糊C均值聚类(fuzzy C means clustering, FCM)进行故障识 别。对同一负荷下的已知故障信号进行变分模态分解&#xff0c;利用 奇异值分解技术进一步提…...

数据结构与算法学习笔记----容斥原理

数据结构与算法学习笔记----容斥原理 author: 明月清了个风 first publish time: 2025.1.30 ps⭐️介绍了容斥原理的相关内容以及一道对应的应用例题。 Acwing 890. 能被整除的数 [原题链接](890. 能被整除的数 - AcWing题库) 给定一个整数 n n n和 m m m个不同的质数 p 1 …...

Java 知识速记:全面解析 final 关键字

Java 知识速记&#xff1a;全面解析 final 关键字 什么是 final 关键字&#xff1f; final 关键字是 Java 中的一个修饰符。它可以用于类、方法和变量&#xff0c;其作用是限制对这些元素的修改。究竟如何限制&#xff1f;我们来逐个分析。 final 在变量中的用法 1. 声明常…...

(笔记+作业)书生大模型实战营春节卷王班---L0G2000 Python 基础知识

学员闯关手册&#xff1a;https://aicarrier.feishu.cn/wiki/QtJnweAW1iFl8LkoMKGcsUS9nld 课程视频&#xff1a;https://www.bilibili.com/video/BV13U1VYmEUr/ 课程文档&#xff1a;https://github.com/InternLM/Tutorial/tree/camp4/docs/L0/Python 关卡作业&#xff1a;htt…...

9、Docker环境安装Nginx

一、拉取镜像 docker pull nginx:1.24.0二、创建映射目录 作用&#xff1a;是将docker中nginx的相关配置信息映射到外面&#xff0c;方便修改配置文件 1、创建目录 # cd home/ # mkdir nginx/ # cd nginx/ # mkdir conf html log2、生成容器 docker run -p 80:80 -d --name…...

受击反馈HitReact、死亡效果Death Dissolve、Floating伤害值Text(末尾附 客户端RPC )

受击反馈HitReact 设置角色受击标签 (GameplayTag基本了解待补充) 角色监听标签并设置移动速度 创建一个受击技能&#xff0c;并应用GE 实现设置角色的受击蒙太奇动画 实现角色受击时播放蒙太奇动画&#xff0c;为了保证通用性&#xff0c;将其设置为一个函数&#xff0c;并…...

572. 另一棵树的子树

前导题&#xff1a;100. 相同的树 回顾一下 判断两棵二叉树相同&#xff0c;根结点相同 且 左子树相同 且 右子树相同。 于是判断如下&#xff1a; 根结点都为null&#xff0c;返回true根结点不都为null&#xff0c;返回false根结点都不为null&#xff0c;但是值不相同&#…...

MATLAB中textBoundary函数用法

目录 语法 说明 示例 匹配文本的边界 匹配文本的结尾边界 对文本的边界求反 textBoundary函数的功能是匹配文本的开头或结尾。 语法 pat textBoundary pat textBoundary(type) 说明 pat textBoundary 创建与文本开头或结尾匹配的模式。textBoundary 可以使用 ~ 运算…...

vue3的路由配置

先找到Layout布局文件&#xff0c;从中找到左侧边栏&#xff0c;找到下述代码 <SidebarItem v-for"route in noHiddenRoutes" :key"route.path" :item"route" :base-path"route.path" />/** *菜单项 <SidebarItem>: *使用…...

在彼此的根系里呼吸

爱如草木&#xff0c;需以晨露滋养&#xff0c;而非绳索捆缚。一段健康的亲密关系&#xff0c;恰似两株根系相连却各自向阳的树——风起时枝叶相触&#xff0c;晴空下共享光影&#xff0c;却始终保有向地心深处生长的自由。那些纠缠的根须是信任编织的网&#xff0c;容得下沉默…...

深入理解若依RuoYi-Vue数据字典设计与实现

深入理解若依数据字典设计与实现 一、Vue2版本主要文件目录 组件目录src/components&#xff1a;数据字典组件、字典标签组件 工具目录src/utils&#xff1a;字典工具类 store目录src/store&#xff1a;字典数据 main.js&#xff1a;字典数据初始化 页面使用字典例子&#xf…...

深入MapReduce——从MRv1到Yarn

引入 我们前面篇章有提到&#xff0c;和MapReduce的论文不太一样。在Hadoop1.0实现里&#xff0c;每一个MapReduce的任务并没有一个独立的master进程&#xff0c;而是直接让调度系统承担了所有的worker 的master 的角色&#xff0c;这就是Hadoop1.0里的 JobTracker。在Hadoop1…...

Flutter_学习记录_Tab的简单Demo~真的很简单

1. Tab的简单使用了解 要实现tab(选项卡或者标签视图)需要用到三个组件&#xff1a; TabBarTabBarViewTabController 这一块&#xff0c;我也不知道怎么整理了&#xff0c;直接提供代码吧&#xff1a; import package:flutter/material.dart;void main() {runApp(MyApp());…...

CSS核心

CSS的引入方式 内部样式表是在 html 页面内部写一个 style 标签&#xff0c;在标签内部编写 CSS 代码控制整个 HTML 页面的样式。<style> 标签理论上可以放在 HTML 文档的任何地方&#xff0c;但一般会放在文档的 <head> 标签中。 <style> div { color: r…...

Deepseek本地部署(ollama+open-webui)

ollama 首先是安装ollama&#xff0c;这个非常简单 https://ollama.com/ 下载安装即可 open-webui 这个是为了提供一个ui&#xff0c;毕竟我们也不想在cmd和模型交互&#xff0c;很不方便。 第一&#xff0c;需要安装python3.11&#xff0c;必须是3.11&#xff08;其他版…...

PaddleSeg 从配置文件和模型 URL 自动化运行预测任务

git clone https://github.com/PaddlePaddle/PaddleSeg.git# 在ipynb里面运行 cd PaddleSegimport sys sys.path.append(/home/aistudio/work/PaddleSeg)import os# 配置文件夹路径 folder_path "/home/aistudio/work/PaddleSeg/configs"# 遍历文件夹&#xff0c;寻…...

数据结构 队列

目录 前言 一&#xff0c;队列的基本知识 二&#xff0c;用数组实现队列 三&#xff0c;用链表实现队列 总结 前言 接下来我们将学习队列的知识&#xff0c;这会让我们了解队列的基本概念和基本的功能 一&#xff0c;队列的基本知识 (Queue) 我们先来研究队列的ADT&#xff0c…...

Cocoa和Cocoa Touch是什么语言写成的?什么是Cocoa?编程语言中什么是框架?为什么苹果公司Cocoa类库有不少NS前缀?Swift编程语言?

Cocoa和Cocoa Touch是什么语言写成的? 二者主要都是用Objective-C语言编写而成的。 什么是Cocoa? Cocoa是苹果操作系统macOS和iOS上的应用程序开发框架集合&#xff0c;核心语言是Objective-C编程语言&#xff0c;在移动平台被称为Cocoa Touch&#xff0c;Cocoa包含多个子框架…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...