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. Vue3

    VUE.3 1.前端工程化: 小白视角 会写HTML. css.JavaScript就会前端开发 需要美化页面的样式,就拽一个bootstrap来 需要操作DOM或者发起Ajax请求,就再拽一个Jqu ...

  2. 玫瑰花变蚊子血,自动化无痕浏览器对比测试,新贵PlayWright Vs 老牌Selenium,基于Python3.10

    也许每一个男子全都有过这样的两个女人,至少两个.娶了红玫瑰,久而久之,红的变了墙上的一抹蚊子血,白的还是床前明月光:娶了白玫瑰,白的便是衣服上沾的一粒饭黏子,红的却是心口上一颗朱砂痣.--张爱玲< ...

  3. 高仿微信|基于Windows微信实现一个IM即时通讯App

    本文干货充足篇幅较长,建议收藏后阅读避免迷路.文末可获取[自动聊天机器人源码和Demo]. 即时通讯IM概述 如果能开发一款即时聊天App,能和微信消息互通,并且只需少许代码量,应该是件非常兴奋的事情 ...

  4. vue基础——命名路由

    路由配置,是vue使用的基础中的基础,采用传统的方式会有些麻烦且不清晰,而命名路由的方式,无论path多长多繁琐,都能直接通过name就匹配到了,十分方便,所以,强烈推荐使用命名路由的方式 传统的方式 ...

  5. C#判断useragent是pc还是手机端

    public static bool CheckAgent(string userAgent) { bool flag = false; string[] keywords = { "And ...

  6. Vitis-AI之docker指南

    由于网络原因,有时候进入docker官网时候很卡,故摘录一部分安装要点,供自己查阅参考 docker安装原文链接:https://docs.docker.com/engine/install/ubun ...

  7. 阿里云服务器ECS(Centos8)下安装和配置python3.8

    1.安装依赖包: yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-dev ...

  8. redis运维与管理

    redis内存存储,速度极快 丰富的附件功能 1.持久化功能:降存储在内存的数据保存到硬盘 2.发布与订阅:将消息同时分发给多个客户端 3.过期键功能:为键设置一个过期时间,让它在指定的时间之后自动被 ...

  9. [WinError 10061] 由于目标计算机积极拒绝,无法连接。- EnlightenGan运行

    在测试EnlightenGan时,可视化结果保存出现问题. 原因:调用visdom可视化,需要先打开visdom python -m visdom.server

  10. SDN拓扑实践

    一.使用Mininet可视化工具,生成下图所示的拓扑,并保存拓扑文件名为学号.py 二.使用Mininet的命令行生成如下拓扑: 1) 3台交换机,每个交换机连接1台主机,3台交换机连接成一条线. 2 ...