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

vue provide 与 inject使用

在vue项目中,如果遇到跨组件多层次传值的话,一般会用到vuex,或者其他第三方共享状态管理模式,如pinia等,但是对于父组件与多层次孙子组件时,建议使用provide 与 inject,与之其他方式相比,简单方便。

基础使用
Vue2 option api
# App.vue
<template><parent/>
</template><script>import Parent from "@/components/parent.vue";export default {name: 'App',components: {Parent},provide: {word: 'Hello Word'}
}
</script># parent.vue
<template><child />
</template><script>
import Child from "@/components/child.vue";export default {name: "parent",components: {Child}
}#child.vue
<template><span>{{ word }}</span>
</template><script>
export default {name: "child",inject: ['word']
}

在界面就显示出相应内容。
在这里插入图片描述
inject 与 props 是相似,可以是一个数组也可以是一个对象,如果是对象的话,可以为每一个属性另设别名,默认值。如下

  inject: {childWord: {from: 'word',default: '默认值'}}

childWord 是孙子组件另起的别名;from 数据来源字段;default 默认值,default 与 props 中的 default 一样,如果默认值是一个对象的话,default 值必须是一个工厂函数返回值。

Vue3 composition api
# App.vue
<template><parent />
</template><script setup>import Parent from "@/components/parent.vue";import {provide} from "vue";provide('word', 'Hello Vue3.0')
</script># chile.vue
<template>{{ word }}
</template><script setup>import { inject } from "vue";const word = inject('word');
</script>

inject 默认值

const word = inject('word', '默认值');
或者
const word = inject('word', () => {});

在 Vue3.0 中响应式数据传递,因为没有 this 所限制,可以直接传递 ref ,或 reactive 值,如下

let val = ref(0);
provide('word', val.value);
或者
provide('word', val)

对于 ref 数据有没有 .value 都可以,因为在 provide 中 会通过 isRef 函数去判断当前值是否为 ref 数据,如果是,Vue 会自动 通过 toValue 函数去取值。

注意

provide 与 inject 可以传递响应式数据,但是 provide 必须是一个函数返回值,与组件中的 data 一样,原因是,如果是一个普通的对象的话,this 指向的是 undefined ,不是该组件实例,这里是运用到的了闭包函数,使得this 指向当前组件实例。

# App.vueprovide: {context: this}# child.vueinject: ['context'],mounted() {console.log(this.context);}

这时控制台打印出来的 this 值是 undefined。
在这里插入图片描述
如果 provide 是一个函数的话,打印出来的就是当前实例对象。
在这里插入图片描述
provide 也不能是一个箭头函数,因为箭头函数还会改变 this 的指向。

  provide: () => {return {context: this}}

这时 this 指向的也是 undefined。
在这里插入图片描述

相关文章:

vue provide 与 inject使用

在vue项目中&#xff0c;如果遇到跨组件多层次传值的话&#xff0c;一般会用到vuex&#xff0c;或者其他第三方共享状态管理模式&#xff0c;如pinia等&#xff0c;但是对于父组件与多层次孙子组件时&#xff0c;建议使用provide 与 inject&#xff0c;与之其他方式相比&#x…...

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

开始之前 Composition API 可以说是Vue3的最大特点&#xff0c;那么为什么要推出Composition Api&#xff0c;解决了什么问题&#xff1f; 通常使用Vue2开发的项目&#xff0c;普遍会存在以下问题&#xff1a; 代码的可读性随着组件变大而变差每一种代码复用的方式&#xff…...

php集成修改数据库的字段

1.界面效果 2.代码 <?phpecho <form action"" method"post"><label for"table">表名:</label><input type"text" id"table" name"table"><br><div id"fieldsContaine…...

爬虫技术之正则提取静态页面数据

第一天 简单示例 在爬虫过程中&#xff0c;我们获取到了页面之后&#xff0c;通常需要做的就是解析数据&#xff0c;将数据持久化到数据库为我所用。如何又快又准确得提取有效数据&#xff1f;这是一门技术&#xff0c;看了我的博客之前可能略有难度&#xff0c;但各位大师看…...

字符串匹配算法:暴力匹配、KMP 算法、Boyer-Moore 算法、Rabin-Karp 算法

字符串匹配算法 字符串匹配算法是在一个字符串&#xff08;称为文本&#xff09;中查找另一个字符串&#xff08;称为模式&#xff09;出现的位置或者是否存在的算法。常见的字符串匹配算法包括暴力匹配、KMP算法、Boyer-Moore算法和Rabin-Karp算法。下面是对这些算法的简要介…...

微信小程序接入百度地图(微信小程序插件)使用文档

第一步配置域名 :在微信公众平台登录后配置服务域名称:https://apis.map.qq.com 第二步申请密钥 申请开发者密钥申请地址 第三步使用插件 选择添加插件 搜索腾讯位置服务地图选点 选择要授权的小程序 授权完毕会在这里显示插件信息 第四步查看使用文档 跳转至文…...

如果需要在Log4j中记录特定的异常信息,应该如何实现?如何动态地更改Log4j的日志级别?

如果需要在Log4j中记录特定的异常信息&#xff0c;应该如何实现&#xff1f; 在Log4j中记录特定的异常信息&#xff0c;你可以使用Logger类的error、warn、info等方法&#xff0c;这些方法通常接受一个字符串消息和一个Throwable对象&#xff08;如异常&#xff09;作为参数。下…...

Rust入门:C++和Rust动态库(dll)的相互调用

无论是C调用Rust动态库还是Rust调用C动态库&#xff0c;其操作基本都是一样地简单&#xff0c;基本和C调用C的动态库没什么区别&#xff0c;只需要列出所需要导入的函数&#xff0c;并链接到相应的lib文件即可。 这里&#xff0c;在windows中&#xff0c;我们以dll动态库为例说…...

第三篇【传奇开心果系列】Python的自动化办公库技术点案例示例:深度解读Pandas股票市场数据分析

传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、Pandas进行股票市场数据分析常见步骤和示例代码1. 加载数据2. 数据清洗和准备3. 分析股票价格和交易量4. 财务数据分析 二、扩展思路介绍1. 技术指标分析2. 波动性分析3. 相关性分析4.…...

3.11笔记2

目前使用的格里高利历闰年的规则如下&#xff1a; 公元年分非4的倍数&#xff0c;为平年。公元年分为4的倍数但非100的倍数&#xff0c;为闰年。公元年分为100的倍数但非400的倍数&#xff0c;为平年。公元年分为400的倍数为闰年。 请用一个表达式 (不能添加括号) 判断某一年…...

web服务器基础

目录 web服务器简介 (1)什么是www (2)网址及HTTP简介 (3)http协议请求的工作流程 主配置文件内的参数 目录标签 缺点 虚拟主机vhosts 示例的格式如下 实例 多IP实现多网页 修改监听端口号 hosts文件及域名解析 修改hosts文件内缓存格式 实现效果 实现多域名解析IP地址 在linux…...

矢量图片转换软件Vector Magic mac中文版功能特色

Vector Magic mac中文版是一款非常流行的矢量图片转换软件&#xff0c;它的功能特色主要体现在以下几个方面&#xff1a; 首先&#xff0c;Vector Magic mac中文版拥有出色的矢量转换能力。它采用世界上最好的全彩色自动描摹器&#xff0c;能够将JPG、PNG、BMP和GIF等位图图像…...

Window部署Oracle并实现公网环境远程访问本地数据库

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle&#xff0c;是甲骨文公司的一款关系…...

灵魂指针,教给(三)

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 目录 一、 字符指针变量 二、数组指针变量 2.1 数组指针变量是什么 2.2 数组指针变量如何初始化 三、二维数组传参本质 四、函数…...

纯手工搭建一个springboot maven项目

前言&#xff1a;idea社区版无法自动搭建项目&#xff0c;手动搭建的经验分享如下&#xff1a; 1 包结构 参考下图&#xff1a; 2 项目结构 3 maven依赖 具体的项目包结构如下图&#xff1a; 依据这个项目包结构配置一个springboot 的 pom依赖&#xff1a; <?xml ve…...

【Java】使用`LinkedList`类来实现一个队列,并通过继承`AbstractQueue`或者实现`Queue`接口来实现自定义队列

使用LinkedList类来实现一个队列&#xff0c;并通过继承AbstractQueue或者实现Queue接口来实现自定义队列。 以下是一个简单的示例&#xff0c;其中队列的大小与另一个List的容量保持一致&#xff1a; import java.util.LinkedList; import java.util.List; import java.util…...

ChatGPT消息发不出去了?我找到解决方案了

现象 今天忽然发现 ChatGPT无法发送消息&#xff0c;能查看历史对话&#xff0c;但是无法发送消息。 猜测原因 出现这个问题的各位&#xff0c;应该都是点击登录后顶部弹窗邀请[加入多语言 alapha 测试]了&#xff0c;并且语言选择了中文&#xff0c;抓包看到ab.chatgpt.com…...

《量子计算:下一个大风口,还是一个热炒概念?》

引言 量子计算,作为一项颠覆性的技术,一直以来备受关注。它被认为是未来计算领域的一次革命,可能改变我们对计算能力和数据处理的理解。然而,随着技术的不断进步和商业应用的探索,人们开始思考,量子计算到底是一个即将到来的大风口,还是一个被过度炒作的概念? 量子计…...

在Ubuntu中如何基于conda安装jupyterlab

在Ubuntu中如何创建ipykernel 可以用下面命令完成 conda create -n newenv python3.8conda activate enwenvconda install ipykernel5.1.4conda install ipython_genutilsipython -m ipykernel install --user --namepython3 --display-name Python3conda install -c conda-fo…...

Unity 中的 PlayFab 入门

要开始在 Unity 中使用 PlayFab,你只需执行以下两个简单步骤即可。第一步是设置 PlayFab 帐户。第二步是通过安装 Unity 编辑器扩展将其连接到 Unity。或者,你也可以下载 PlayFab SDK 并在没有扩展的情况下进行配置。 设置你的 PlayFab 帐户 访问 PlayFab 的网站并创建你的…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...