vue跨组件之间传值Provide/Inject
官网传送门:inject Vue2.2.0+
# 背景
关于Vue组件的通讯方式相信大家能倒背如流
- 父子组件:通过
prop
,$emit
,【$root
,$parent
,$children
】 - 非父子组件:Vuex实现,父子层层传递、中央事务总线Bus,
$ref
子实例可以用
this.$parent
访问父实例,子实例被推入父实例的$children
数组中。应当节制地使用它们,其只是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信.
Vue官网建议,在正常情况下,这两种方式已经能满足绝大多数甚至所有的业务需求,对于应用程序代码应优先使用它们处理。然而,还有一种主要为高阶插件/组件库提供的用例办法,即provide/inject
,这对选项需要一起使用。
# 功能
通常情况下,父组件向孙组件传递数据,可以采用父子props
层层传递,也可以使用bus
和Vuex
直接交互。在Vue2.2.0之后,Vue还提供了provide/inject
选项
这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
也就是说,在父组件只要声明了provide
,在其子组件,孙组件,曾孙组件等能形成上下游关系的组件中交互,无论多深都能通过inject
来访问provider
中的数据。而不是局限于只能从当前父组件的prop
属性来获取。注意他只做祖先通后代的单向传递的一个办法。有人这么形容:
provide就相当于加强版父组件prop,可以跨越中间组件
,inject就相当于加强版子组件的props
# 缺点
官网不建议在应用中直接使用该办法,理由很直接:他怕你"管不好"
设计项目,通常追求有清晰的数据流向和合理的组件层级关系便于调试和维护,然而这对选项支持任意层级都能访问,导致数据追踪比较困难。不知道那一层级声明了provide
又或是哪些层级使用了inject
。造成比较大的维护成本。因此,除组件库或高阶插件外,Vue建议用Vuex解决或其他办法处理。
# 使用办法
- provide 提供变量:
Object | () => Object
- inject 注入变量:
Array<string> | { [key: string]: string | Symbol | Object }
provide
选项应该是一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。在该对象中,它支持ES6中Symbol
作为key
,但只在原生支持等环境下可工作。
inject
选项可以是
- 一个字符串数组
- 一个对象,
key
为本地绑定名,value
为:- 在可用的注入内容中搜索用的
key
,或 - 一个对象,其
from
属性是在可用的注入内容中搜索用的key
,default
属性是降级情况下使用的value
- 在可用的注入内容中搜索用的
提示:
provide
和inject
绑定并不是可响应的,这是刻意为之,然而如果你传入了一个可监听的对象,那么气对象的属性还是可监听的。
# 案例展示
在父组件中provide
提供变量
<template><div><p>{{ title }}</p><son></son></div>
</template>
<script>import Son from "./son"export default {name: 'Father',components: { Son },// provide选项提供变量provide: {message: 'provided by father'},data () {return {title: '父组件'}},methods: { ... }}
</script>
在子组件<son></son>中,我们故意不使用任何父组件的信息
<template><div><p>{{ title }}</p><grand-son></grand-son></div>
</template>
<script>
import grandSon from "./grandSon "
export default {name: "Son",components: { grandSon },data () {return {title: '子组件'}},
};
</script>
在孙组件<grand-son></grand-son>中,使用inject
来注入
<template><div><p>message:{{ message }}</p></div>
</template>
<script>
export default {name: "GrandSon",inject: [ "message" ],data () {return {title: '孙组件'}}
};
</script>
结果孙组件页面显示:
message: provided by father
建议
使用依赖注入时,强烈建议使用命名空间策略,根据父组件特性对命名空间名称做规范,可以解决不知道哪里提供的问题。且依赖注入是单向数据流,有统一分发数据的优势,合理使用能提供很大便利性。
vue跨组件之间传值Provide/Inject相关推荐
- vue父子组件之间传值的方法
vue父子组件之间传值的方法 一.基本父子传值 父传子 方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用 父组件代码: <template>< ...
- vue中组件之间传值的六种方式(完整版)
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B ...
- vue 2 组件之间传值
对vue2版本的组件之间传值的一个简单整合: 父组件 => 子组件: props 和 refs - props: { msg: String } //parent <hello-world ...
- Vue - 全局组件之间传值(中间件传值)
Vue项目中全局组件之间传值(中间件传值) 一. 使用方法 二. 传值实例 一. 使用方法 创建一个中间件文件,文件名自定义 这里创建的文件为 send.js send.js 中配置 import V ...
- Vue 兄弟组件之间传值 Bus方法
1.在vue项目中新建一个js文件(文件名:bus.js) import Vue from 'vue'export default new Vue(); 2.在需要传值的页面引用并开始传参 <s ...
- Vue父子组件之间传值
组件分两种,全局组件和局部组件 全局组件这么写 Vue.component("nav-bar",{props:['navShow',"elecText",&qu ...
- VUE兄弟组件之间传值,Vue.prototype.bus = new Vue(),this.bus.$on 的使用方法
举个例子: 组件一中有个分享按钮,点击分享按钮,展示组件二中的分享组件: 组件二分享组件有个取消按钮,点击关闭分享组件. 一.在main.js中添加一个bus实例: Vue.prototype.bus ...
- VUE父子组件之间的传值,以及兄弟组件之间的传值;
一.Vue父子 组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
- vue组件之间传值的几种方式
vue组件传值 父子组件之间传值.几种常见方式 第一种方式(父传子) 父组件 <m-child :childMsg="parentMsg"></m-child&g ...
最新文章
- ffmpeg 命令_ffmpeg常用命令行集锦
- Mark Links@2012/8/25
- SwipeRefreshLayout和RecyclerView滑动冲突的解决
- 无法加载文件 C:/Windows/Microsoft.NET/Framework/Meaningless_string/mscorlib.tlb
- 细胞冻存及细胞计数的技巧
- 【算法系列之万字总结常用的查找算法,持续补充更新中】
- python矩阵旋转函数_Python3算法之十:矩阵旋转
- leetcode No.123 买卖股票的最佳时机 III
- Multi Task Learning在工业界如何更胜一筹
- mybatis系列-06-输入映射
- CVE-2018-8120 漏洞分析
- 【转】JAVA成长之路
- 百度富文本编辑器的使用
- python实用性自己设计_用Python设计PCR引物: Primer3-py 初识
- 《未来简史》读书笔记
- zqoj 1819: 加加加!(油) 【水题】【郑大校赛】
- Typora的历史版本下载地址
- EI 和 SCI 检索号查询
- [面试题] 从抽屉找东西的概率学问题
- 微信推出热搜排行榜,微博压力山大?
热门文章
- 用access做考场桌贴_巧用Excel VBA 快速编排考场座位
- strtoul函数注意点
- python学习——二维码生成和识别
- 关于ST-Link在Keil5中无法识别的解决办法
- 不需要再手工指定JVM启动参数-XX:+UseCompressedOops
- Excel列数值格式强制转成文本格式
- 2-6 CAD基础 移动(move)
- 您知道“网管员”吗?
- CSS颜色 尺寸 字体属性 文本属性
- 表面抗体取向偶联聚苯乙烯微球ps的方法和原理/抗体包被荧光磁珠/中性亲和素包被的微球/链霉亲和素包被的磁珠