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。
在这里插入图片描述

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

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

相关文章

如何使用Everything+cpolar实现公网远程搜索下载内网储存文件资料

文章目录 前言1.软件安装完成后&#xff0c;打开Everything2.登录cpolar官网 设置空白数据隧道3.将空白数据隧道与本地Everything软件结合起来总结 前言 要搭建一个在线资料库&#xff0c;我们需要两个软件的支持&#xff0c;分别是cpolar&#xff08;用于搭建内网穿透数据隧道…

高分1、2号卫星原始遥感影像数据

高分一号 高分一号卫高分一号卫星是中国高分辨率对地观测系统的首发星&#xff0c;突破了高空间分辨率、多光谱与宽覆盖相结合的光学遥感等关键技术&#xff0c;设计寿命5至8年。 高分辨率对地观测系统工程是《国家中长期科学和技术发展规划纲要(2006&#xff5e;2020年)》确定…

StarRocks实战——欢聚集团极速的数据分析能力

目录 一、大数据平台架构 二、OLAP选型及改进 三、StarRocks 经验沉淀 3.1 资源隔离&#xff0c;助力业务推广 3.1.1 面临的挑战 3.1.2 整体效果 3.2 稳定优先&#xff0c;监控先行&#xff0c;优化运维 3.3降低门槛&#xff0c;不折腾用户 3.3.1 与现有的平台做打通 …

前端框架的发展史可以追溯到早期的静态网页时代

前端框架的发展史可以追溯到早期的静态网页时代。以下是前端框架的主要发展阶段&#xff1a; 静态网页时代&#xff1a;在互联网的初期&#xff0c;网页主要由HTML、CSS和JavaScript构成。这些网页是静态的&#xff0c;没有复杂的交互和动态内容。 原生JavaScript时代&#xf…

LeetCode刷题--- 环绕字符串中唯一的子字符串

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构 ​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述动态规划算法…

分库分表浅析原理

数据库存放数据大了&#xff0c;查询等操作就会存在瓶颈&#xff0c;怎么办&#xff1f; 1. 如果是单张表数据大了&#xff0c;可以在原有库上新建几张表table_0、table_1、table_2、.....table_n 写程序对数据进行分表&#xff1a; --这里提供一种一种分表策略,这里只需维护…

容器安全是什么?

容器安全定义 容器安全是指保护容器的完整性。这包括从其保管的应用到其所依赖的基础架构等全部内容。容器安全需要完整且持续。通常而言&#xff0c;企业拥有持续的容器安全涵盖两方面&#xff1a; 保护容器流水线和应用保护容器部署环境和基础架构 如何将安全内置于容器流…

模板方法模式在交易策略开发中的应用

文章目录 一、模板方法模式的特点和优点二、交易策略开发的常见模板方法三、模板方法模式在交易策略应用方面四、模板方法模式开发交易策略的代码 一、模板方法模式的特点和优点 特点 模板方法模式是一种行为设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;将一些步…

Java开发从入门到精通(一):Java的基础语法项目案例

Java大数据开发和安全开发 Java 案例练习案例一:买飞机票案例二:开发验证码案例三:评委打分案例四:数字加密案例五:数组拷贝案例六: 抢红包案例七:找素数案例八:模拟双色球[拓展案例] Java 案例练习 案例一:买飞机票 分析: 方法是需要接收数据?需要接收机票原价、当前月份、舱…

新手如何快速上手学习单片机?

读者朋友能容我&#xff0c;不使博文负真心 新开专栏&#xff0c;期待与诸君共享精彩 个人主页&#xff1a;17_Kevin-CSDN博客 专栏&#xff1a;《单片机》 学习单片机是一个有趣且有挑战性的过程。单片机是一种微控制器&#xff0c;广泛应用于各种电子设备和嵌入式系统中。在这…

IOS面试题object-c 61-70

61. 阐述isKindOfClass、isMemberOfClass、selector作用分别是什么&#xff1f;isKindOfClass&#xff1a;作用是某个对象属于某个类型或者继承自某类型。 isMemberOfClass&#xff1a;某个对象确切属于某个类型。 selector&#xff1a;通过方法名&#xff0c;获取在内存中的函…

Linux 驱动 | 高级驱动 | I2C子系统

Linux 驱动 | 高级驱动 | I2C子系统 学习笔记 主要内容: 1,i2c协议和时序 2,i2c子系统软件框架 3,i2c从设备驱动编写方式–不考虑具体的硬件 4,mpu6050硬件连接,陀螺仪和加速度工作原理,它们的应用 5,mpu6050数据和获取 6,mpu6050从设备驱动编写 I2C驱动开发: I2C…

#QT(本地音乐播放器)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;之前做的音乐播放器只做了一个界面&#xff0c;是因为跟的课程发现到后面需要付费&#xff0c;并且WINGW6.2.0运行QMediaPlayer时无法运行&#xff0c;会崩溃&#xff0c;现在退一步用WINGW5.12.2做一个本地音乐播放器 3.记录&am…

pyside6 pytq PyDracula QVideoWidget视频只有画面没有声音

解决方案&#xff1a; 先不使用框架&#xff0c;纯pyside6代码&#xff0c;如果添加视频有画面有声音&#xff0c;那可以排除是硬件问题&#xff0c;如果没有画面只有声音&#xff0c;可能是视频解码器无法解码&#xff0c;换个格式的视频文件如果只有使用PyDracula 出问题&am…

[论文笔记] Open-sora 2、视频数据集介绍 MSR-VTT

MSR-VTT COVE - Computer Vision Exchange 论文参考:https://www.microsoft.com/en-us/research/wp-content/uploads/2016/06/cvpr16.msr-vtt.tmei_-1.pdf 用于视频理解的大规模视频基准,特别是将视频翻译为文本的新兴任务。这是通过从商业视频搜索引擎收集 257 个热门查询…

Rust多线程访问数据,推荐使用mutex还是channel?

在Rust中&#xff0c;选择使用互斥锁&#xff08;mutex&#xff09;还是通道&#xff08;channel&#xff09;来进行多线程间的数据访问&#xff0c;主要取决于你的具体需求和数据共享的模式。 互斥锁&#xff08;Mutex&#xff09; 互斥锁是一种同步原语&#xff0c;用于保护…

小蓝的钥匙(蓝桥杯错排)

现在有28个小朋友&#xff0c;每个人手上有一把钥匙&#xff0c;每一个钥匙都只能打开自己的房间门&#xff0c;现在将所有钥匙都收上来&#xff0c;然后再随机打乱分给每个小朋友&#xff0c;也就是有28&#xff01;的分法&#xff0c;请问现在其中14个小朋友的钥匙能恰好打开…

Mysql8的优化(DBA)

Mysql8的优化 1、Mysql的安装优化1.1 修改配置参数&#xff08;命令行、配件文件&#xff09;1.1.1 命令行修改配置参数1.1.2 参数持久化1.1.3 Mysql多实例启动&#xff0c;以及配置密码文件 1.2 查询表的相关参数&#xff0c;以及表空间管理 2、Mysql高级优化&#xff08;SQL&…

Android中显式Intent和隐式Intent的区别

1、intent的中文名 称是意图&#xff0c;Intent是各个组件之间信息沟通的桥梁&#xff0c; 既能在Activity之间沟通&#xff0c;又能在Activity与Service之间沟通&#xff0c;也能在Activity与Broadcast之间沟通 **intent组成元素的列表说明**2、显式Intent&#xff0c;直接指定…

编译支持国密的抓包工具 WireShark

目录 前言WireShark支持国密的 WireShark小结前言 在上一篇文章支持国密的 Web 服务器中,我们搭建了支持国密的 Web 服务器,但是,我们使用 360 安全浏览器去访问,却出现了错误: 是我们的 Web 服务器没有配置好?在这里插入图片描述还是 360 安全浏览器不支持国密?还是两…