vue2.0与3.0中的provide和inject 用法
1、provide/inject有什么用?
常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props
属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护。
vue
提供了provide
和inject
帮助我们解决多层次嵌套嵌套通信问题。在provide
中指定要传递给子孙组件的数据,子孙组件通过inject
注入祖父组件传递过来的数据。
使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据
2、provide/inject使用方式
provide
:是一个对象 / 返回对象的函数。
里面是属性和属性值。
注意:子孙层的provide
会掩盖祖父层provide
中相同key
的属性值
inject
:一个字符串数组,或者是一个对象。
属性值可以是一个对象,包含from
和default
默认值,from
是在可用的注入内容中搜索用的 key
(字符串或 Symbol
),意思就是祖父多层provide
提供了很多数据,from
属性指定取哪一个key
;
default
指定默认值。
具体用法:
父组件
<template>
<div> </div>
</template> <script>
export default {
components: {
MergeTipDialog,
BreakNetTip
},
data () {
return {
isShow: false,
isRouterAlive: true
}, // 父组件中返回要传给下级的数据 可以使函数,也可以是data中的数据
provide () {
return {
reload: this.reload
isShow:this.isShow
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
子孙
<template>
<popup-assign
:id="id"
@success="successHandle"
>
<div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
<strong>将被分配给</strong>
<a
slot="reference"
class="unite-btn"
>
指派
</a>
</popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用vue reload方法 内容 isShow
inject: ['reload','isShow'],
components: {
PopupAssign
},
methods: {
async successHandle () {
this.reload()
}
}
}
</script>
vue3.0用法
父组件
子组件
vue2.0与3.0中的provide和inject 用法的更多相关文章
- vue中的provide和inject
vue中的provide和inject:https://blog.csdn.net/viewyu12345/article/details/83011618
- vue 3 学习笔记 (八)——provide 和 inject 用法及原理
在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...
- vue中使用provide和inject刷新当前路由(页面)
1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
- vue的provide和inject特性
由来 组件之间的通信可以通过props和$emit的方式进行通信,但是如果组件之间的关系非常复杂的话,通过以上的方式会很麻烦,并且程序会非常脆弱,没有建中性可言. 在==vue2.2.0 中新增pro ...
- vue2.0 与 vue3.0 配置的区别
提示:要了解vue2.0与vue3.0区别,首先你要熟悉vue2.0 从最明显最简单的开始 项目目录结构 可以明显的看出来,vue2.0与3.0在目录结构方面,有明显的不同(vue3.0我是安装了cs ...
- vc6.0运用mysql数据库中的编码所导致的乱码问题(接收和输出的编码必须要一致)
[编译中遇见的问题] ①在用vc 6.0去调用MySQL中的数据时,出现中文乱码 ②不明白mysql中的码制 [开始解决问题] ①打开mysql控制台 ...
- OpenGL2.0及以上版本中glm,glut,glew,glfw,mesa等部件的关系
OpenGL2.0及以上版本中gl,glut,glew,glfw,mesa等部件的关系 一.OpenGL OpenGL函数库相关的API有核心库(gl),实用库(glu),辅助库(aux).实用工具库 ...
- android4.0浏览器在eclipse中编译的步骤
工程源码: 注意: 如果下载已经修过的源码,只要进行3.4.8步骤就应该可以了. eclipse版本:adt-bundle-windows (Android Developer Tools Build ...
- 从0,1,2...n中统计0,1,2...9各出现了多少次【SWUN1597】
题目就是说给你一个N.计算一下从0,1,2,3,4,5,,,,,,n-1,n中计算出0,1,2,3,,,,7,8,9分别出现了多少次... #include<cstdio> #includ ...
随机推荐
- SpringData JPA 使用原生 SQL
在实现个人博客系统的归档功能的时候,遇上这样的需求: 先把数据库中所有条目的时间按照年月分组,并查询出年月(String)的列表 根据年月字符串查询符合条件的博客,并返回博客列表 由于数据访问层使用的 ...
- 题解 P6892 [ICPC2014 WF]Baggage
解题思路 非常好的一道构造题. 在手动模拟几个样例(也许不止几个)之后呢. 就可以发现其实这些操作的开始以及最后几步是有相通之处的. 关于手动模拟的样例放在了文章末尾,需要的自取. 先考虑操作次数. ...
- 【Maven实战技巧】「插件使用专题」Maven-Assembly插件实现自定义打包
前提概要 最近我们项目越来越多了,然后我就在想如何才能把基础服务的打包方式统一起来,并且可以实现按照我们的要求来生成,通过研究,我们通过使用maven的assembly插件完美的实现了该需求,爽爆了有 ...
- 就这?Spring 事务失效场景及解决方案
小明:靓仔,我最近遇到了很邪门的事. 靓仔:哦?说来听听. 小明:上次看了你的文章<就这?一篇文章让你读懂 Spring 事务>,对事务有了详细的了解,但是在项目中还是遇到了问题,明明加了 ...
- [CTF] CTF入门指南
CTF入门指南 何为CTF ? CTF(Capture The Flag)夺旗比赛,在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式.CTF起源于1996年DEFCON全球黑客大会 ...
- Java基础——逻辑运算符、位运算符
逻辑运算符.位运算符.三元运算符 逻辑运算符 public class Demon05 { public static void main(String[] args) { ...
- 探讨UE4中的UBT和UHT
前言 UBT和UHT是编译工具,谁定义的呢,虚幻引擎自己定义的,拿来做什么呢,UBT和UHT是UE4用来简化多平台编译,去除用户自定义平台编译项目的操作 我们写的UE4代码不是标准的C++代码,是基于 ...
- 拦截器HandlerInterceptorAdapter的postHandle和afterCompletion无法获取response返回值问题
缘起 有一个需求,在进入controller之前验证调用次数是否超过限制,在响应之后判断是否正常返回,对调用次数进行+1,发现带@RestController的类和带@ResponseBody的方法在 ...
- cmseasy&内网渗透 Writeup
某CTF内网渗透 题目:www.whalwl.site:8021 目录 cmseasy 内网横向渗透 cmseasy 简单看一下网站架构 Apache/2.4.7 (Ubuntu) PHP/5.5.9 ...
- sqli-labs lesson 26-27a
less 26: 因为本关在windows上运行可能会出现字符转义(apacche下空格无法转义)错误,所以在docker上搭建好sqli-labs 在win2003上远程登录sqli-labs 先执 ...