学习vue3第十一节(依赖注入:provide/inject)

本机介绍:provide/inject
注意:大家在看此小节时候,默认大家已经了解一些组件的使用方法

1、依赖注入的用途:

当嵌套层级多的时候,某个子组件需要较远层级的父组件数据时候,如果我们依然使用props 传递数据,那么父组件的层级会越来越深,代码也会越来越复杂,这个传输的链路太长,如果中间出现差错,不容易排查。这时候就可以使用provide 和 inject 来解决这个问题。
如图:
请添加图片描述

而当我们使用provide 和 inject 的时候,就可以像下面这样使用:
一个父组件可以为所有的后代组件提供数据依赖,任何后代无论层级多么深,都可以注入由父组件提供给链路的依赖。
请添加图片描述

2、依赖注入固定值及响应数据

如下代码实现:vue2中

固定值的时候是非响应式的
如图:
在这里插入图片描述

注意:vue2中provide和inject 注入依赖孙子组件中的数据是非响应式的;
如果响应实现响应式,需要使用

<template>
<div class="par"><h3>provide--inject</h3>父组件--pName:{{ msg }}<h3>provide--inject</h3><Provide></Provide><button @click="handleChangeName">change name</button></div>
</template>
<script>
import Provide from './components/provide1.vue'
import { computed } from 'vue'
export default {name: 'App',components: {Provide},provide(){return {// pName: 'Andy' // 固定值;此时的pName是非响应式的pName: computed(() => this.msg) // 传入计算属性,再次更改msg的值,会发现孙子组件里面的值同步更新了,此时的pName是响应式的}},data() {return {msg: 'Welcome Andy'}},created() {console.log('app created')},methods: {handleChangeName() {this.msg = 'Andy1'console.log('==handleChangeName==', this.msg)}}
}

// 子组件:

<template><div class="provide1"><div>provide1</div><ProvideS></ProvideS></div>
</template>
<script>
import ProvideS from './provide11.vue'
export default {name: 'ProvideM',components: {ProvideS}
}
</script>

// 孙子组件

<template>
<div class="provide11">pName:{{pName}}
</div>
</template>
<script>
export default {name: 'ProvideMy',components: {},props: {},inject: ['pName'],
}
</script>

如图:
请添加图片描述
3、注入别名以及默认值
当后代组件中有注入时候,父级组件中需要有同名的属性名依赖,否则运行会报错;如果父级组件中不想依赖该属性名,那么后代组件中就需要有默认值,否则运行会报错

为什么要使用依赖别名呢?
因为当我们需要依赖多个属性,或者页面结构复杂时候,我们要避免依赖的属性名与data的属性名冲突,或者是(vue3 setup 中声明的变量重名)此时就可以使用依赖别名。

<template>
<div class="provide11">pName:{{pName}}<br>name: {{ name }}
</div>
</template>
<script>
export default {name: 'ProvideMy',components: {},props: {},// inject: ['pName'],inject: {name: { // name 代表的是 pName 的别名from: 'pName', // from代表父组件依赖的属性名称default: 'pName 的默认值'}},computed: {},data() {return {}}
}
</script>

如图:
在这里插入图片描述

4、孙子组件响应式更改依赖属性值

当我们想在孙子组件中更改父组件的属性是,可以在注入属性的值的同时,注入一个回调函数如下:

vue3中

父组件

<template>
<div class="par"><h3>provide--inject</h3>父组件--pName:{{ msg }}<h3>provide--inject</h3><Provide></Provide><button @click="handleChangeName">父组件change name</button></div>
</template>
<script setup>
import Provide from './components/provide1.vue'
import { ref, provide, inject } from 'vue'
let msg = ref('Andy start')const handleChangeName = () => {msg.value = 'Andy change'
}
const sChangeName = () => {msg.value = 'Andy sChangeName'
}
provide('pName', {msg, sChangeName})
</script>

子组件

<template><div class="provide1"><div>provide1</div><ProvideS></ProvideS></div>
</template>
<script setup>
import ProvideS from './provide11.vue'</script>

孙子组件

<template>
<div class="provide11">msg---:{{msg}}<br><br><button @click="sChangeName">孙子组件事件</button>
</div>
</template>
<script setup>
import { computed, provide, ref, inject } from 'vue'
const { msg, sChangeName } = inject('pName')
</script>

如图:
初始值:
请添加图片描述
父组件点击更新
请添加图片描述
孙子组件点击更新
请添加图片描述

5、使用Symbol做唯一的键名

在大型应用中,为了避免属性名的冲突,我们可以使用Symbol类型来作为注入的的键名

比如 const myProvide = Symbol()

使用如下

<template>
<div class="par"><h3>provide--inject</h3>父组件--pName:{{ msg }}<h3>provide--inject</h3><Provide></Provide><button @click="handleChangeName">父组件change name</button></div>
</template>
<script setup>
import Provide from './components/provide1.vue'
import { ref, provide, inject } from 'vue'
const myProvide = Symbol()
let msg = ref('Andy start')
provide(myProvide, {msg}) // 此处依赖的键名更改为myProvide
</script>

6、我们还可以在应用的最外层注入,比如在main.js | main.ts中

这样在应用的任何一个组件中都可以使用myProvide依赖
以vue3为例:

<script setup>
import { createApp, povide } from 'vue'
import App from './App.vue' // 引入App.vue
const app = createApp(App)app.provide('myProvide', '测试')
app.mount('#app')
</script>

最后:
1、vue2中的注入依赖是默认是非响应式的,若想要实现响应式,需要结合computed回调函数使用;
2、vue3中的注入依赖是默认是响应式的,即使通过解构 const { msg, sChangeName } = inject('pName'),由ref创建的对象,依然是响应式的,相比较而言,大家可以直接使用vue3 setup语法糖的写法,若要使用setup() {} 回调函数的写法,需要同步更新依赖provide的属性值,否则依赖的属性值不会更新。

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

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

相关文章

数据挖掘与机器学习 1. 绪论

于高山之巅&#xff0c;方见大河奔涌&#xff1b;于群峰之上&#xff0c;便觉长风浩荡 —— 24.3.24 一、数据挖掘和机器学习的定义 1.数据挖掘的狭义定义 背景&#xff1a;大数据时代——知识贫乏 数据挖掘的狭义定义&#xff1a; 数据挖掘就是从大量的、不完全的、有噪声的、…

CI/CD实战-jenkins结合docker 5

实验准备&#xff1a; 在docker主机要下载git工具 禁掉key的校验 确保在立即构建项目时不会出现任何报错&#xff1a; 自动化构建docker镜像 在server3上安装docker-ce 修改内核参数 拷贝证书 添加默认仓库 添加harbor仓库的解析 测试拉取 登录harbor私有仓库 在jenkins安装d…

微服务day06 -- Elasticsearch的数据搜索功能。分别使用DSL和RestClient实现搜索

1.DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一…

linux用户管理1

linux系统可以多用户同时登录&#xff0c;在各自权限下做各自的事情 useradd添加普通用户&#xff0c;之后使用suusername切换用户 所有用户中&#xff0c;root用户权限最大&#xff0c;对应uid&#xff0c;gid均为0&#xff0c;uid为用户编号&#xff0c;gid为用户所在组编号…

AcWing 4609:火柴棍数字 ← 贪心算法

【题目来源】 https://www.acwing.com/problem/content/4612/【题目描述】 给定 n 个火柴棍&#xff0c;你可以用它们摆出数字 0∼9。 摆出每个数字所需要的具体火柴棍数量如下图所示&#xff1a; 请你用这些火柴棍摆成若干个数字&#xff0c;并把这些数字排成一排组成一个整数…

【数据结构和算法初阶(C语言)】二叉树的链式结构--前、中、后序遍历实现详解,节点数目计算及oj题目详解---二叉树学习日记③

目录 ​编辑 1.二叉树的链式存储 2.二叉树链式结构的实现 2.1树的创建 2.2二叉树的再理解 3.链式结构二叉树的遍历 3.1前序遍历实现&#xff1a; ​编辑 3.2中序遍历实现 3.3后序遍历 ​编辑 4.链式二叉树节点数目的计算 4.1 总节点个数的计算 错误代码1&#xff1a; 错误代…

使用git下载github/gitee仓库部分或单个文件的方法

前言 有些时候在github或者gitee仓库中我们只需要下载整个项目中的我门需要的那一部分文件夹或文件就行了&#xff0c;不需要下载所有的项目。这样可以节省很多流量和时间 步骤 1.建立一个新的 git 本地仓库 这里我在D:\test中初始化 命令&#xff1a; git init2.在本地仓…

【Yolov7】踩坑记录

#windows上调用cuda去 使用GPU来进行预测 -需要下载cudnn&#xff0c;cuDNN 9.0.0 Downloads | NVIDIA Developer -环境变量要配置 比如 &#xff1a; C:\Program Files\NVIDIA\CUDNN\v9.0\bin\11.8 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.7\bin 也可…

学习笔记Day15:Shell脚本编程

Shell脚本编程 Linux系统环境 Linux系统的4个主要部分&#xff1a;内核、shell、文件系统和应用程序。 内核是操作系统的核心&#xff0c;决定系统性能和稳定性shell &#xff1a;一种应用程序&#xff0c;是用户和内核交互操作的接口&#xff0c;是套在内核外的壳&#xff…

Stable Diffusion 进阶教程 - 二次开发(制作您的文生图应用)

目录 1. 引言 2. 基于Rest API 开发 2.1 前置条件 2.2 代码实现 2.3 效果演示 2.4 常见错误 3. 总结 1. 引言 Stable Diffusion作为一种强大的文本到图像生成模型&#xff0c;已经在艺术、设计和创意领域引起了广泛的关注和应用。然而&#xff0c;对于许多开发者来说&#xff…

使用倒模耳机壳UV树脂胶液制作舞台监听耳返入耳式耳机壳推荐的材料和工艺流程?

推荐的材料和工艺流程如下&#xff1a; 材料&#xff1a; UV树脂胶液&#xff1a;选择适合倒模工艺的UV树脂胶液&#xff0c;要求具有高透明度、良好的流动性和固化性能。模具材料&#xff1a;建议使用硅胶模具&#xff0c;因为硅胶模具具有较高的耐用性和稳定性&#xff0c;…

Linux 安装 JDK、MySQL、Tomcat(图文并茂)

所需资料 下载 1.1 软件安装方式 在Linux系统中&#xff0c;安装软件的方式主要有四种&#xff0c;这四种安装方式的特点如下&#xff1a; 安装方式特点二进制发布包安装软件已经针对具体平台编译打包发布&#xff0c;只要解压&#xff0c;修改配置即可rpm安装软件已经按照re…

C#自定义控件 生成 与 加入到项目

C#自定义控件生成 在C#中&#xff0c;自定义控件通常是通过继承现有的控件类&#xff08;如UserControl、Form等&#xff09;并添加或修改其属性和方法来实现的。以下是一个简单的示例&#xff0c;演示如何创建一个自定义控件&#xff1a; 首先&#xff0c;创建一个新的Window…

sonar+gitlab提交阻断 增量扫描

通过本文&#xff0c;您将可以学习到 sonarqube、git\gitlab、shell、sonar-scanner、sonarlint 一、前言 sonarqube 是一款开源的静态代码扫描工具。 实际生产应用中&#xff0c;sonarqube 如何落地&#xff0c;需要考虑以下四个维度&#xff1a; 1、规则的来源 现在规则的…

每日一练:LeeCode-200、岛屿数量【DFS递归+BFS队列】

给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以假设该网格的四条边…

MyBatis:查询与连接池

一、查询 1、多表查询 尽量避免使用多表查询&#xff0c;尤其是对性能要求较高的项目。因为多表查询必然会导致性能变低。 例如&#xff1a;select *from ta运行需要10ms&#xff0c;select *from tb 运行也需要10s。但是&#xff0c;select *from ta left join tb on ta.xx…

python初级第一次作业

一、 dayint(input("enter today day")) fdayint(input("enter num of day since today")) c((fday%7)day)%7 if c0:print("sunday") elif c1:print("monday") elif c2:print("tuesday") elif c3:print("wendnsday&quo…

Jmeter脚本优化——CSV数据驱动文件

使用 CSV 数据文件设置实现参数化注册 1&#xff09; 本地创建 csv 文件&#xff0c;并准备要使用的数据&#xff0c;这里要参数化的是注册的用户名和邮箱。所以在 csv 文件中输入多组用户名和邮箱。 2&#xff09; 通过测试计划或者线程组的右键添加->配置元件->CSV…

多线程合并练习题,线程安全(售票任务引入)--学习JavaEE的day30

day30 练习&#xff08;day29&#xff09; 注意代码注释&#xff0c;里面涉及代码实现遇到问题及解决方案&#xff0c;由于理解方便没有单独出来 1.计算任务 1.计算任务&#xff0c;一个包含了2万个整数的数组&#xff0c;分拆了多个线程来进行并行计算&#xff0c;最后汇总出…

FT232RL/FT232RNL替代GP232RNL USB转UART桥接控制器芯片低成本方案

关注过小编的朋友都知道&#xff0c;之前小编有推荐过FT232RL的替代产品GP232RL&#xff0c;软硬件直接兼容&#xff0c;无需做修改。随着产品的更新迭代&#xff0c;后面也出来了升级版GP232RNL&#xff0c;低成本方案&#xff0c;可直接替代FT232RL/FT232RNL&#xff0c;参数…