vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue子组件设计provide inject

vue子组件设计provide和inject理解使用

作者:大海爱奔跑

这篇文章主要为大家介绍了vue子组件设计provide和inject理解及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

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

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

按照文档的描述,我的理解是:在多级嵌套的组件体系中,某级外层组件可以通过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>

 // 打印结果

康熙皇帝对乾隆皇帝说:"你是我孙子"  乾隆皇帝回答:"是的,爷爷"
雍正皇帝对乾隆皇帝说:"你是我儿子"  乾隆皇帝回答:"是的,爸爸"

以上就是vue子组件设计provide和inject理解使用的详细内容,更多关于vue子组件设计provide inject的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文