vue3【详解】跨组件通信 -- 依赖注入 provide inject

用于解决跨组件(父组件与所有后代)数据通信

在这里插入图片描述

提供数据 provide

传出数据的组件 (通常为父辈组件)提供数据

<script setup>
import { provide } from 'vue'provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

provide() 函数

  • 第1个参数 —— 注入名,字符串或 Symbol
  • 第2个参数 —— 注入值,任意类型(若为 ref,则后代组件与父组件会建立响应式的联系)

注入数据 Inject

需要数据的组件 (通常为后代组件)注入数据

<script setup>
import { inject } from 'vue'const message = inject('message')
</script>

可添加默认值(当父组件未提供数据时使用)

const value = inject('message', '这是默认值')

当默认值需要通过调用一个函数或初始化一个类来取得时,为了避免在用不到默认值的情况下进行不必要的计算或产生副作用,可以使用工厂函数来创建默认值:

const value = inject('key', () => new ExpensiveClass(), true)

第三个参数 true 表示默认值应该被当作一个工厂函数。

数据使用方修改响应式数据

建议尽可能将对响应式状态的变更都保持在供给方组件中,以便更容易维护。

但有时数据使用方需要修改响应式数据,怎么办?

可以在供给方组件内声明并提供一个更改数据的方法函数

<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue'const location = ref('North Pole')function updateLocation() {location.value = 'South Pole'
}provide('location', {location,updateLocation
})
</script>
<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'const { location, updateLocation } = inject('location')
</script><template><button @click="updateLocation">{{ location }}</button>
</template>

使用 readonly() 来包装提供的值,可以确保提供的数据不能被注入方的组件更改

<script setup>
import { ref, provide, readonly } from 'vue'const count = ref(0)
provide('read-only-count', readonly(count))
</script>

使用 Symbol 作注入名

使用场景:

  • 大型的应用,包含非常多的依赖提供
  • 编写提供给其他开发者使用的组件库

好处:避免潜在的命名冲突。

推荐在一个单独的文件中导出这些注入名 Symbol

// keys.js
export const myInjectionKey = Symbol()
// 在供给方组件中
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'provide(myInjectionKey, { /*要提供的数据
*/ });
// 注入方组件
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'const injected = inject(myInjectionKey)

提供全局数据 app provide

常用于编写插件

import { createApp } from 'vue'const app = createApp({})app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

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

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

相关文章

pycharm中运行.sh文件

最近在跑一个项目代码&#xff0c;里面要运行.sh文件。于是配置了下如何在pycharm中正常运行.sh文件。 首先安装好git&#xff0c;然后 File—>Settings—>Tools—>Terminal—>Shell path&#xff0c;将cmd.exe改成刚刚下载的git的路径&#xff0c;注意选择的是s…

web服务器——虚拟主机配置实战

搭建静态网站 —— 基于 http 协议的静态网站 实验 1 &#xff1a;搭建一个 web 服务器&#xff0c;访问该服务器时显示 “hello world” 欢迎界面 。 实验 2 &#xff1a;建立两个基于 ip 地址访问的网站&#xff0c;要求如下 该网站 ip 地址的主机位为 100 &#xff0c;设置…

web——搭建静态网站——基于http协议的静态网站

实验 4 &#xff1a;建立两个基于域名访问的网站&#xff0c;要求如下&#xff1a; 新建一个网站&#xff0c;域名为 www.ceshi.com &#xff0c;设置网站首页目录为 /www/name &#xff0c;网页内容为 this is test 。 新建一个网站&#xff0c;域名为 rhce.first.day &…

阵列信号处理学习笔记(一)--阵列信号处理定义

阵列信号 阵列信号处理学习笔记&#xff08;一&#xff09;–阵列信号处理定义 阵列信号处理学习笔记&#xff08;二&#xff09;–空域滤波基本原理 文章目录 阵列信号前言一、阵列信号处理定义1.1 信号1.2 阵列 二、雷达数据中哪些属于空间采样总结 前言 MOOC 阵列信号处理…

在线 PDF 制作者泄露用户上传的文档

两家在线 PDF 制作者泄露了数万份用户文档&#xff0c;包括护照、驾驶执照、证书以及用户上传的其他个人信息。 我们都经历过这样的情况&#xff1a;非常匆忙&#xff0c;努力快速制作 PDF 并提交表单。许多人向在线 PDF 制作者寻求帮助&#xff0c;许多人的祈祷得到了回应。 …

FOG Project 文件名命令注入漏洞复现(CVE-2024-39914)

0x01 产品简介 FOG是一个开源的计算机镜像解决方案,旨在帮助管理员轻松地部署、维护和克隆大量计算机。FOG Project 提供了一套功能强大的工具,使用户能够快速部署操作系统、软件和配置设置到多台计算机上,从而节省时间和精力。该项目支持基于网络的 PXE 启动、镜像创建和还…

【人工智能】AI音乐创作兴起与AI伦理的新视角

文章目录 &#x1f34a;AI音乐创作&#xff1a;一键生成&#xff0c;打造你的专属乐章&#x1f34a;1 市面上的AI音乐应用1.1 Suno AI1.2 网易天音 &#x1f34a;2 AI音乐创作的流程原理(直接制作可跳到第3点)2.1 AI音乐流派2.2 AI音乐风格2.3 AI音乐的结构顺序2.5 选择AI音乐乐…

手机如何播放电脑的声音?

准备工具&#xff1a; 有线耳机&#xff0c;手机&#xff0c;电脑&#xff0c;远控软件 1.有线耳机插电脑上 2.电脑安装pc版远控软件&#xff0c;手机安装手机端控制版远控软件 3.手机控制电脑开启声音控制 用手机控制电脑后&#xff0c;打开声音控制&#xff0c;电脑播放视频…

uniapp vue3 上传视频组件封装

首先创建一个 components 文件在里面进行组件的创建 下面是 vvideo组件的封装 也就是图片上传组件 只是我的命名是随便起的 <template><!-- 上传视频 --><view class"up-page"><!--视频--><view class"show-box" v-for"…

Netty HTTPS服务端高并发宕机案例

读李林峰《netty进阶指南》于第18章有感。特此记录一下问题的现象&#xff0c;以及他是如何排障的&#xff0c;以此加深理解 目录标题 事件梳理排查事后分析如何解决总结 事件梳理 某系统内部两个模块之间采用 HTTPS 通信。 某天&#xff1a; 客户端某时间吞吐量为0&#xf…

海思arm-hisiv400-linux-gcc 交叉编译rsyslog 记录心得

需要编译rsyslog,参考海思3536平台上rsyslog交叉编译、使用-CSDN博客和rsyslog移植&#xff08;亲测成功&#xff09;_rsyslog交叉编译-CSDN博客 首先下载了要用到的一些库的源码&#xff0c;先交叉编译这些库 原来是在centos6上交叉编译的&#xff0c;结果编译时报缺少软件要…

MySQL练习02

题目 步骤 创建数据库 create database mydb8_worker; #创建数据库 use mydb8_worker; #使用数据库 创建表 create table t_worker( department_id int(11) not null comment 部门号, worker_id int(11) primary key not null comment 职工号, worker_date date not …

数据结构 - 栈(精简介绍)

文章目录 普通栈Stack用法Q 最长有效括号 单调栈Q 接雨水 普通栈 栈就是一个先进后出的结构 想象一个容器&#xff0c;往里面一层一层放东西&#xff0c;最早放进去的东西被压在下面&#xff08;所以放元素也叫压栈&#xff09;&#xff0c;要拿到这个最低层的东西需要先把上面…

【系统架构设计师】十三、软件可靠性(基本概念|软件可靠性建模)

目录 一、基本概念 1.1 定义 1.2 软件可靠性的定量描述 1.3 可靠性测试的意义 1.4 广义的软件可靠性测试和狭义的软件可靠性测试 二、软件可靠性建模 2.1 可靠性模型的组成 2.2 可靠性模型的共同假设 2.3 可靠性模型的重要特性 2.4 可靠性建模方法 往期推荐 历年真…

当Excel处理神器EasyExcel遇上Apache POI:一场关于依赖的趣味‘撞车’冒险

目录 前言 报错 解决思想 解决方案 结尾 前言 &#x1f388;&#x1f388;&#x1f388;"Hey there, 大家好&#xff01;我是Blue&#xff0c;今天可不是一般的‘代码奇遇记’&#xff01;我在与EasyExcel这位数据处理界的魔术师共舞时&#xff0c;突然遭遇了前所未…

Unity-URP-SSAO记录

勾选After Opacity Unity-URP管线&#xff0c;本来又一个“bug”, 网上查不到很多关于ssao的资料 以为会不会又是一个极度少人用的东西 而且几乎都是要第三方替代 也完全没有SSAO大概的消耗是多少&#xff0c;完全是黑盒(因为用的人少&#xff0c;研究的人少&#xff0c;优…

解决GoLand添加GOROOT提示The selected directory is not a valid home for Go Sdk的问题

现象 解决 在Go安装路径下找到zversion.go文件&#xff0c;我的在D:\Program Files\Go1.21.1\src\runtime\internal\sys下面 打开文件&#xff0c;添加如下内容&#xff1a; const TheVersion go1.21.1保存后再重新添加GOROOT即可

Python莫兰生死抑制放大进化图

&#x1f3af;要点 &#x1f3af;种群离散时间莫兰生死动态图解 | &#x1f3af;良好混合种群的固定概率 | &#x1f3af;数值求解生成埃尔多斯-雷尼图 | &#x1f3af;计算马尔可夫链的转移矩阵概率 | &#x1f3af;出生死亡动态和死亡出生动态概率无向随机图和有向随机图&am…

react Jsx基础概念和本质

什么是jsx jsx是JavaScript和XML(HTML)的缩写&#xff0c;表示在js代码中编写HTML模板结构&#xff0c;它是react中编写UI模板的方式 const message this is message function App(){return (<div><h1>this is title</h1>{message}</div>) } jsx优…

Mike she中常出现的error及解决办法

前言&#xff1a; 最近用了下MIKE SHE坡面流模块&#xff0c;感觉一场雨降下来和MIKESHE和MIKE21模块算出来还是有不一样的地方&#xff0c;这个先不聊&#xff0c;聊点直接的&#xff0c;到底一个玩个模块遇到了哪些错误&#xff0c;我们来说说解决方法。 Error1&#xff1a;…