vue中的provide和inject

阅读element-ui源码,发现在设计子组时件用到了inject属性,随即查了一下官方文档,得知vue在2.2.0版本里新增了provide / inject

provideinject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

<cite>Vue.js官方文档</cite>

按照文档的描述,我的理解是:在多级嵌套的组件体系中,某级外层组件可以通过provide属性向其下任意一级子组件提供一个依赖,不管层级有多深;而某级子组件则可以通过inject属性接收来自其上任意一级父组件提供的依赖(通过this.xxx形式获取)。注意:provideinject需要一起使用。

举个例子说明:

清朝三位皇帝:康熙(玄烨)、雍正(胤禛)、乾隆(弘历)是祖孙三代,我们用vue组件的思想表示他们之间的关系,并模拟他们的一段对话,以此理解vue中的provideinject

调用组件——大清帝国:qing-dynasty.vue

<!--组件的嵌套关系-->
<kangxi>
  <yongzheng>
    <qianlong></qianlong>
  </yongzheng>
</kangxi>

定义爷爷组件——康熙皇帝:kangxi.vue

<template>
  <div class="kangxi">
    康熙皇帝
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'kangxi',
    // 爷爷对儿子提供‘kangxiToYongzheng’
    // 对孙子提供‘kangxiToQianlong’
    provide: {
      kangxiToYongzheng: '康熙皇帝对雍正皇帝说:"你是我儿子"',
      kangxiToQianlong: '康熙皇帝对乾隆皇帝说:"你是我孙子"'
    },
    data () {
      return {}
    }
  }
</script>

<style lang="scss">
.kangxi {
  width: 200px;
  height: 140px;
  text-align: center;
  background-color: #ffb599;
}
</style>

定义儿子组件——雍正皇帝:yongzheng.vue

<template>
  <div class="yongzheng">
    雍正皇帝
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'yongzheng',
    // 儿子接收父亲提供的‘kangxiToYongzheng’
    inject: ['kangxiToYongzheng'],
    // 同时,儿子也给孙子提供‘yongzhengToQianlong’
    provide: {
      yongzhengToQianlong: '雍正皇帝对乾隆皇帝说:"你是我儿子"'
    },
    data () {
      return {}
    },
    created () {
      // 可以通过this获取
      console.log(this.kangxiToYongzheng, ' 雍正皇帝回答:"是的,爸爸"')
    }
  }
</script>

<style lang="scss">
  .yongzheng {
    width: 160px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    background-color: #84b5ff;
  }
</style>
// 打印结果
康熙皇帝对雍正皇帝说:"你是我儿子"  雍正皇帝回答:"是的,爸爸"

定义孙子组件——乾隆:qianlong.vue

<template>
  <div class="qianlong">
    乾隆皇帝
  </div>
</template>

<script>
  export default {
    name: 'qianlong',
    // 孙子接收爷爷的‘kangxiToQianlong’、父亲的‘yongzhengToQianlong’
    inject: ['kangxiToQianlong', 'yongzhengToQianlong'],
    data () {
      return {}
    },
    created () {
      // 可以通过this获取
      console.log(this.kangxiToQianlong, ' 乾隆皇帝回答:"是的,爷爷"')
      console.log(this.yongzhengToQianlong, ' 乾隆皇帝回答:"是的,爸爸"')
    }
  }
</script>

<style lang="scss">
.qianlong {
  width: 120px;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  background-color: blanchedalmond;
}
</style>
// 打印结果
康熙皇帝对乾隆皇帝说:"你是我孙子"  乾隆皇帝回答:"是的,爷爷"
雍正皇帝对乾隆皇帝说:"你是我儿子"  乾隆皇帝回答:"是的,爸爸"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352