在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。用于父级组件向下传递数据。
provide/inject:简单的来说就是在父组件(或者曾祖父组件)中通过provide来提供变量,然后在子组件(或者孙组件)中通过inject来注入变量。(例如子组件想利用祖父组件上的值的情况)

1:定义一个parent component

<template>
<div>
  <child></child>
</div>
</template> <script>
import childOne from '../components/test/Child'
export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      child
    },
  data(){
    return {
      val:9
    }
  }
}

在这里我们在父组件中provide for这个变量
注意:如果provide{}对象中利用了this,则有提示this找不到的错误,因为provide定义的时候,渲染没有完成,需要改成
provide(){
  return {
    val: this.val
  }
}
的形式。

2  定义一个子组件Child

<template>
<div>
{{demo}}
<grandson></grandson>
</div>
</template> <script>
import childtwo from './Grandson'
export default {
name: "child",
inject: ['for'],
data() {
return {
demo: this.for
}
},
components: {
grandson
}
}
</script>

3  定义另一个孙子组件Grandson

<template>
<div>
{{demo}}
</div>
</template> <script>
export default {
name: "",
inject: ['for'],
data() {
return {
demo: this.for
}
}
}
</script>

在子组件与孙组件中使用jnject注入了provide提供的变量for,并将它提供给了data属性。

这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。

运行之后看下结果

从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。

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

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

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

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

  3. vue中的provide/inject讲解

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

  4. vue中的provide和inject

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

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

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

  6. vue 初步了解provide/inject

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

  7. vue 高阶 provide/inject

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

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

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

  9. vue 组件传值$attrs $listeners $bus provide/inject $parent/$children

    $attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...

随机推荐

  1. kubernetes中port、target port、node port的对比分析,以及kube-proxy代理

    转:http://blog.csdn.net/xinghun_4/article/details/50492041 容器网络实例 服务中的3个端口设置 这几个port的概念很容易混淆,比如创建如下se ...

  2. System.SerializableAttribute

    System.SerializableAttribute 串行化是指存储和获取磁盘文件.内存或其他地方中的对象.在串行化时,所有的实例数据都保存到存储介质上,在取消串行化时,对象会被还原,且不能与其原 ...

  3. STM32f103的数电采集电路的DMA设计和使用优化程序

    DMA,全称为:Direct Memory Access,即直接存储器访问.DMA传输方式无需CPU直接控制传输,也没有中断处理方式那样保留现场和恢复现场的过程,通过硬件为RAM与I/O设备开辟一条直 ...

  4. 树莓派做路由器_配置防火墙filter和nat转发_转载

    转自:https://blog.csdn.net/hustsselbj/article/details/45866681 如果用树莓派当作路由器转发有线和无线网络,则需要对iptables进行相关配置 ...

  5. 分布式系统CAP理论与CA选择

    总结: CAP指的是数据一致性.服务可用性.分区容错性:(这里的一致性指的是强一致性,又叫原子性或线性一致性:可用性指的是所有读写操作都要能终止,没有时延上的要求) 分布式系统中P是必选项:在P必选的 ...

  6. 执行start-dfs.sh后,datenode没有启动的解决办法

    执行start-dfs.sh后,datenode没有启动,很大一部分原因是因为在第一次格式化dfs后,启动并使用了hadoop,后来又重新执行了格式化命令(hdfs namenode -format) ...

  7. MATLAB plot()、scatter()的RGB颜色设置以及生成渐变色

    1.转载:https://blog.csdn.net/wh1312142954/article/details/80796764 plot(x,y,'Color',[R G B]);%只要设置颜色中R ...

  8. for循环 while循环 break跳出循环 continue结束本次循环 exit退出整个脚本

  9. DOTween 使用方法

    参考链接: http://dotween.demigiant.com/documentation.php https://www.cnblogs.com/backlighting/p/5344047. ...

  10. mysql数据库建立的数据库在哪个文件夹?

    一般在安装目录下的data文件夹下,或者在C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.1\dat ...