什么是 provide / inject [传送门]

vue的组件通讯方式我们熟知的有 props $emit bus vuex ,另外就是 provide/inject

provide/inject  是 Vue.js 2.2.0 版本后新增的 API,在文档中这样介绍 :

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。


inject 选项应该是:

  • 一个字符串数组,或
  • 一个对象,对象的 key 是本地的绑定名,value 是:
    • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
    • 一个对象,该对象的:
      • from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
      • default 属性是降级情况下使用的 value

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

并且文档中有如下提示:
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

使用的例子:

// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
} // 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
}

vue组件通讯之provide / inject的更多相关文章

  1. Vue组件通讯黑科技

    Vue组件通讯 组件可谓是 Vue框架的最有特色之一, 可以将一大块拆分为小零件最后组装起来.这样的好处易于维护.扩展和复用等. 提到 Vue的组件, 相必大家对Vue组件之间的数据流并不陌生.最常规 ...

  2. vue 组件通讯方式到底有多少种 ?

    前置 做大小 vue 项目都离不开组件通讯, 自己也收藏了很多关于 vue 组件通讯的文章. 今天自己全部试了试, 并查了文档, 在这里总结一下并全部列出, 都是简单的例子. 如有错误欢迎指正. 温馨 ...

  3. Vue组件通讯

    Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通讯,是通过props ...

  4. vue组件通讯方法汇总(在不使用vuex的情况下)

    前三种是父子组件通讯,最后一种是平级组件.

  5. 依赖VUE组件通讯机制实现场景游戏切换

  6. vue provide/inject 父组件如何给孙子组件传值

    一般情况下我们父子组件之间的传值用的是props,这个就不多说了,但是如果想让父组件给子组件的组件传值怎么办呢,如果还用props的话肯能会比较复杂,这里我们就可以用到 provide 和 injec ...

  7. URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

    原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...

  8. Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)

    Vue组件通讯   Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...

  9. vue组件间通信六种方式(完整版)

    本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...

随机推荐

  1. CSS中的float和margin的混合使用

    在最近的学习中,在GitHub上找了一些布局练习,我发现了我自己对布局超级不熟悉(很难受). 在以前的学习中,感觉使用CSS就记住各个属性的功能就OK了,但是呢?真的很打脸.不说了,太伤心了,进入正题 ...

  2. <Win10开发>UWP使用.Net Native编译时遇到的一些问题。

    最近开始尝试把WP8.1 Runtime的项目升级成Win10 UWP,我用的方法没什么技巧性,就是直接复制文件和代码到新建的UWP项目.结果是后台代码未经修改,全部正常运行.但是UI控件的布局有些偏 ...

  3. [转] C++项目中的extern "C" {}

    点击阅读原文 引言 在用C++的项目源码中,经常会不可避免的会看到下面的代码: #ifdef __cplusplus extern "C" { #endif /*...*/ #if ...

  4. Excel常用公式大全

    公式是单个或多个函数的结合运用. AND “与”运算,返回逻辑值,仅当有参数的结果均为逻辑“真(TRUE)”时返回逻辑“真(TRUE)”,反之返回逻辑“假(FALSE)”. 条件判断 AVERAGE ...

  5. TensorFlow从0到1之矩阵基本操作及其实现(7)

    矩阵运算,例如执行乘法.加法和减法,是任何神经网络中信号传播的重要操作.通常在计算中需要随机矩阵.零矩阵.一矩阵或者单位矩阵. 本节将告诉你如何获得不同类型的矩阵,以及如何对它们进行不同的矩阵处理操作 ...

  6. (三)解决httpclient乱码

    原文链接:https://blog.csdn.net/justry_deng/article/details/81042379

  7. Redis删除策略和逐出策略

    本文知识点 过期数据概念 数据删除策略 逐出算法 过期数据 先来看三个key值,分别为sex.name.age. 这三个值设置的指令为 set name kaka setex age 100 24 s ...

  8. vue 生成二维码+截图

    链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...

  9. WeChair项目Alpha冲刺(6/10)

    团队项目进行情况 1.昨日进展    Alpha冲刺第六天 昨日进展: 前端:和后端成功交互,页面修改和完善 后端:和前端成功交互,但是数据解密失败,初步编写登录的service层和dao层代码未测试 ...

  10. java soket通信总结 bio nio aio的区别和总结

    1 同步 指的是用户进程触发IO操作并等待或者轮询的去查看IO操作是否就绪 自己上街买衣服,自己亲自干这件事,别的事干不了. 2 异步 异步是指用户进程触发IO操作以后便开始做自己的事情,而当IO操作 ...