provide/inject 是 vue 2.2.0 版本新增

  • 类型:

    • provide:Object | () => Object
    • inject:Array<string> | { [key: string]: string | Symbol | Object }

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

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

inject 选项应该是:

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

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

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

vue 中的 provide/inject的更多相关文章

  1. vue中的provide/inject的学习

    在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项.用于父级组件向下传递数据.provide/inject:简单的来说就是在父组件(或者曾祖父组件)中通过pro ...

  2. 在vue中使用[provide/inject]实现页面reload

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject ...

  3. vue中的provide/inject的学习使用

    irst:定义一个parent component ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <template>  <div> ...

  4. vue中的provide/inject讲解

    最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject:简单的来说就是在父组件中通过provider来提供变量 ...

  5. vue中的provide和inject

    vue中的provide和inject:https://blog.csdn.net/viewyu12345/article/details/83011618

  6. vue中使用provide和inject刷新当前路由(页面)

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...

  7. vue 初步了解provide/inject

    provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是 provide / inject这对选项需要一起使用, ...

  8. vue 高阶 provide/inject

    1.一般情况使用都是在app.vue配置为: provide () {return {isTest: this}}, 2.所有子组件都可以引用 拿到app.vue里面的所有数据 inject: ['i ...

  9. 小项目中vuex使用频率不太多我们完全可以用provide inject 来代替可以让项目小不少

    在一般小型项目中vuex实在是太浪费了所以我们可以用到 vue中的provide inject 代替 1.在vue3中我们先另起一个 文件创建一个全局的状态和方法的地方(如果你的全局状态特别的多记得要 ...

  10. 聊聊 Vue 中 provide/inject 的应用

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...

随机推荐

  1. 微信小程序使用vant组件样式不生效的问题

    下面提供几个解决方案 方案一: 官方文档有说明,将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖, ...

  2. Symbol详解

    Symbol Symbol是es6引入的一个新的原始数据类型,是一个独一无二的值. 目前为止,js的数据类型有以下几种: 数据类型 说明 undefined undefined null null b ...

  3. ThreadLocal最终版本

    ThreadLocal工作原理 目录 ThreadLocal工作原理 一.官方文档描述 二.为什么使用ThreadLocal 2.1.案例 三.ThreadLocal和syncronized关键字区别 ...

  4. html+css+js思维导图

  5. java 转发重定向

    首先我们要知道: (1)request.getRequestDispatcher()是请求转发,前后页面共享一个request ; 这个是在服务端运行的,对浏览器来说是透明的.(2)response. ...

  6. mysql 百万计数据导入--Load data infile

    百万计数据导入MySQL时候如果是每条数据都 insert 会很慢 mysql> set global local_infile = 1; mysql> select @@local_in ...

  7. Android studio学习笔记3

    Android studio学习笔记3 RelativeLayout常见属性 相对于父元素给控件布局 android:layout_centerHrizontal 若为ture水平居中 android ...

  8. Mysql习题系列(一):基本select语句与运算符

    Mysql8.0习题系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 文章目录 Mysql8.0习题系列 1. 基本select语句 1.1 题目 1.2答案 1.查询员工12个月 ...

  9. '大龄‘后端程序员,快速捡起ECMAScript6

    1.Promise 2.迭代器 3.async 4.module 5. this的理解

  10. Mysql去重获取最新的一条数据

    Mysql去重获取最新的一条数据 select * from yjzt_kindergartens r where id in (select max(id) from yjzt_kindergart ...