当前位置: 首页 > 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包含多个子框架…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...