【Vue3】组件通信之$parent

【Vue3】组件通信之$parent

  • 背景
  • 简介
  • 开发环境
  • 开发步骤及源码
  • 总结

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用 $parent 实现子组件向父组件传数据。

Vue3 中组件间通信包括:

  • 父组件向子组件传数据,实现方案有:
    • props
    • v-model
    • $ref
    • 默认插槽 / 具名插槽
  • 子组件向父组件传数据
    • props
    • v-model
    • $parent
    • 自定义事件
    • 作用域插槽
  • 父组件向子组件的子组件传数据,即向孙子组件传数据
    • $attrs
    • provider & inject
  • 任意组件间传数据
    • mitt
    • Pinia

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.91.1

开发步骤及源码

1> 创建 Vue3 工程,参考:【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assetscomponents 目录。

3> 修改 src 目录下 main.ts

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 修改 Vue 根组件 src/App.vue,使用 defineExpose 函数向子组件提供数据。

<template><div class="parent"><h2>图书馆</h2><div class="books"><div class="book" v-for="book in books" :key="book.id"><h3>书名:{{ book.title }}</h3><h3>作者:{{ book.author }}</h3></div></div><Reader /></div>
</template><script setup lang="ts">
import Reader from './components/Reader.vue'
import { reactive } from 'vue'const books = reactive([{ id: '001', title: '长安的离职', author: '马伯庸'},{ id: '001', title: '坐天下', author: '张宏杰'},{ id: '001', title: '饥饿的盛世', author: '张宏杰'},{ id: '001', title: '风起陇西', author: '马伯庸'},
])// 向子组件提供数据
defineExpose({ books })
</script><style scoped lang="scss">
.parent {background-color: orange;padding: 20px;.books {display: flex;margin-bottom: 20px;.book {background-color: white;border: 1px solid blue;margin-right: 10px;padding: 0 10px;width: 300px;}}
}
</style>

注意:需要执行 npm install -D sass 命令安装 CSS 预处理器。

5> 定义子组件,使用 $parent 获取父组件引用。

<template><div class="content"><h2>读者:{{ name }}</h2><button @click="borrow($parent)">借书</button></div>
</template><script setup lang="ts">
import { ref } from 'vue'const name = ref('小七')
function borrow(parent: {[key: string]: any} | null) {if (parent != null) {parent.books.shift()}
}
</script><style scoped lang="scss">
.content {background-color: greenyellow;padding: 20px;button {font-size: 18px;font-weight: bold;height: 40px;margin-bottom: 10px;margin-right: 10px;width: 150px;}
}
</style>

注意:$parent 获取父组件引用可能为 null,所以示例代码中对 null 做了特殊处理。

6> 执行命令 npm run dev 启动应用,浏览器访问:http://localhost:5173/
在这里插入图片描述
每点击一次子组件中的 借书 按钮,父组件中图书列表便会删除列表中第一本图书。

总结

使用 $parent 实现子组件向父组件传数据,首先需要父组件使用 defineExpose 函数将数据提供给子组件,defineExpose 函数是一个对象,由向子组件提供的数据组成,然后子组件使用 $parent 获取对父组件的引用,并进一步实现向父组件传数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/390992.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Java的网络考试系统的设计与实现

点击下载源码 基于Java的网络考试系统的设计与实现 摘 要 科技在进步&#xff0c;人们生活和工作的方式正发生着改变&#xff0c;不仅体现在人们的衣食住行&#xff0c;也体现在与时俱进的考试形式上。以前的考试需要组织者投入大量的时间和精力&#xff0c;需要对考试的试题…

人工智能与大数据的融合:驱动未来的力量

人工智能与大数据的融合&#xff1a;驱动未来的力量 一、人工智能与大数据的概述二、人工智能与大数据在数据库中的融合三、实际应用案例四、未来发展方向总结 【纪录片】中国数据库前世今生 在数字化潮流席卷全球的今天&#xff0c;数据库作为IT技术领域的“活化石”&#xff…

【Python实战】如何优雅地实现文字 二维码检测?

前几篇&#xff0c;和大家分享了如何通过 Python 和相关库&#xff0c;自动化处理 PDF 文档&#xff0c;提高办公效率。 【Python实战】自动化处理 PDF 文档&#xff0c;完美实现 WPS 会员功能【Python实战】如何优雅地实现 PDF 去水印&#xff1f;【Python实战】一键生成 PDF…

【Linux详解】基础IO:软硬连接 | 动静态库管理

目录 软硬链接 1. 介绍 2.理解 2.1 如何理解硬链接&#xff1f; 2.2 如何理解软连接&#xff1f; 动静态库 1.介绍 1.1 使用 1.2 什么是库&#xff1f; 2.生成 2.1 静态库 2.2 动态库&#xff1a; 软硬链接 1. 介绍 1.1 软连接 是一个独立文件&#xff0c;具有独…

【Python机器学习】支持向量机——利用完整platt SMO算法加速优化

在几百个数据点组成的小规模数据集上&#xff0c;简化版SMO算法的运行是没有什么问题&#xff0c;但是在更大的数据集上的运行速度就会变慢。完整版的platt SMO算法应用了一些能够提速的启动方法。 platt SMO算法时通过一个外循环来选择第一个alpha值的&#xff0c;并且其选择…

内网穿透--ICMP隧道转发实验

实验背景 通过公司带有防火墙功能的路由器接入互联网&#xff0c;然后由于私网IP的缘故&#xff0c;公网无法直接访问内部web服务器主机。通过内网其它主机做代理&#xff0c;穿透访问内网web服务器主机边界路由器或防火墙做静态NAT映射访问内网服务器inux主机&#xff0c;且策…

MySQL的数据类型

文章目录 数据类型分类整型bit类型浮点类型字符串类型charvarchar 日期和时间类型enum和set find_ in_ set 数据类型分类 整型 在MySQL中&#xff0c;整型可以指定是有符号的和无符号的&#xff0c;默认是有符号的。 可以通过UNSIGNED来说明某个字段是无符号的。 在MySQL中如…

Tree-of-Traversals:结合知识图谱与大模型,通过树遍历和回溯寻找高置信度推理路径

Tree-of-Traversals&#xff1a;结合知识图谱与大模型&#xff0c;通过树遍历和回溯寻找高置信度推理路径 Tree-of-Traversals算法解析对比 MindMap1. 与知识图谱&#xff08;KGs&#xff09;的整合2. 推理方法3. 灵活性与可扩展性4. 在医学诊断中的应用 速度和准确1. 速度2. 推…

第十一章:Kubernetes API服务器的安全防护

本章内容包括&#xff1a; 了解认证机制ServiceAccounts是什么及使用的原因了解基于角色(RBAC)的权限控制插件使用角色和角色绑定使用集群角色和集群角色绑定了解默认角色及其绑定 1 了解认证机制 在前面的内容中&#xff0c;我们说到API服务器可以配置一个到多个认证的插件(授…

数据结构链表2(常考习题1)(C语言)

移除链表元素&#xff1a; . - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 解题思路&#xff1a; 情况1&#xff1a; 情…

python dash框架

Dash 是一个用于创建数据分析型 web 应用的 Python 框架。它由 Plotly 团队开发&#xff0c;并且可以用来构建交互式的 web 应用程序&#xff0c;这些应用能够包含图表、表格、地图等多种数据可视化组件。 Dash 的特点&#xff1a; 易于使用&#xff1a;Dash 使用 Python 语法…

深入解析 KMZ 文件的处理与可视化:从数据提取到地图展示项目实战

文章目录 1. KMZ 文件与 KML 文件简介1.1 KMZ 文件1.2 KML 文件 2. Python 环境配置与依赖安装3. 代码实现详解3.1 查找 KMZ 文件3.2 解压 KMZ 文件3.3 解析 KML 文件3.4 可视化 KMZ 数据 4. 项目实战4.1. 数据采集4.2. 项目完整代码 5. 项目运行与结果展示6. 总结与展望 在处理…

将后台传来的数据,转成easyui-tree所需格式

easyui 中文文档 EasyUI Tree组件需要一个包含特定属性&#xff08;如id, text, children等&#xff09;的JSON对象数组来初始化。 而后台返回的数据&#xff0c;它可能不是我们直接能拿来用的。 方式一&#xff1a;使用loadFilter函数处理来自Web Services的JSON数据。 $(#…

功能实现——通过阿里云 OSS 实现文件管理

目录 1.需求分析2.阿里云 OSS 开通与配置2.1.登录阿里云官网2.2.搜索 OSS 服务并开通2.3.OSS 配置 3.在项目使用阿里云 OSS3.1.项目环境搭建3.2.代码实现3.2.1.将本地文件上传到阿里云 OSS3.2.2.将前端传入的文件上传到阿里云 OSS3.2.3.下载文件到本地2.3.4.流式下载3.2.4.OSSC…

本地部署文生图模型 Flux

本地部署文生图模型 Flux 0. 引言1. 本地部署1-1. 创建虚拟环境1-2. 安装依赖模块1-3. 创建 Web UI1-4. 启动 Web UI1-5. 访问 Web UI 0. 引言 2024年8月1日&#xff0c;blackforestlabs.ai发布了 FLUX.1 模型套件。 FLUX.1 文本到图像模型套件&#xff0c;该套件定义了文本到…

【收录率高丨最快会后3-4个月EI检索 | 往届均已EI检索】第四届光学与通信技术国际学术会议(ICOCT 2024,8月9-11)

欢迎参加第四届光学与通信技术国际学术会议&#xff08;ICOCT 2024&#xff09;&#xff0c;该会议将于2024年8月9-11日在南京举办。自2021年首次会议以来&#xff0c;ICOCT已经发展成为光学和通信领域较有影响力的国际会议之一&#xff0c;聚焦最前沿的技术进展与未来发展趋势…

【Redis 进阶】哨兵 Sentinel(重点理解流程和原理)

Redis 的主从复制模式下&#xff0c;一旦主节点由于故障不能提供服务&#xff0c;需要人工进行主从切换&#xff0c;同时大量的客户端需要被通知切换到新的主节点上&#xff0c;对于上了一定规模的应用来说&#xff0c;这种方案是无法接受的&#xff0c;于是 Redis 从 2.8 开始…

“八股文“在现代编程面试中的角色重塑:助力、阻力还是桥梁?

&#x1f308;所属专栏&#xff1a;【其它】✨作者主页&#xff1a; Mr.Zwq✔️个人简介&#xff1a;一个正在努力学技术的Python领域创作者&#xff0c;擅长爬虫&#xff0c;逆向&#xff0c;全栈方向&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff01; 您的点…

AI人工智能开发环境配置

AI人工智能 为什么使用Python来开发AI 人工智能被认为是未来的趋势技术。 已经有了许多应用程序。 因此&#xff0c;许多公司和研究人员都对此感兴趣。 但是这里出现的主要问题是&#xff0c;在哪种编程语言中可以开发这些 AI 应用程序&#xff1f; 有各种编程语言&#xff0c…

Python 实现股票指标计算——LON

LON - 铁龙长线 1 公式 LC : REF(CLOSE,1); VID : SUM(VOL,2)/(((HHV(HIGH,2)-LLV(LOW,2)))*100); RC : (CLOSE-LC)*VID; LONG : SUM(RC,0); DIFF : SMA(LONG,10,1); DEA : SMA(LONG,20,1); LON : DIFF-DEA; LONMA : MA(LON,10); LONT : LON, COLORSTICK; 2 数据准备…