vue子组件设计provide和inject理解使用
作者:大海爱奔跑
这篇文章主要为大家介绍了vue子组件设计provide和inject理解及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
引言
阅读element-ui源码,发现在设计子组时件用到了inject
属性,随即查了一下官方文档,得知vue在2.2.0版本里新增了provide
/ inject
:
provide
和 inject
主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
按照文档的描述,我的理解是:在多级嵌套的组件体系中,某级外层组件可以通过provide
属性向其下任意一级子组件提供一个依赖,不管层级有多深;而某级子组件则可以通过inject
属性接收来自其上任意一级父组件提供的依赖(通过this.xxx
形式获取)。注意:provide
和inject
需要一起使用。
举个例子说明
清朝三位皇帝:康熙(玄烨)、雍正(胤禛)、乾隆(弘历)是祖孙三代,我们用vue组件的思想表示他们之间的关系,并模拟他们的一段对话,以此理解vue中的provide
和inject
。
调用组件
——大清帝国: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的资料请关注脚本之家其它相关文章!