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的资料请关注脚本之家其它相关文章!
相关文章
vue中使用elementUI自定义校验及点击提交不生效问题解决办法
我们在项目中经常会用到ElementUI的表单验证,下面这篇文章主要给大家介绍了关于vue中使用elementUI自定义校验及点击提交不生效问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12Vue vant-ui使用van-uploader实现头像上传功能
这篇文章主要介绍了Vue vant-ui使用van-uploader实现头像图片上传,项目中是使用有赞vant-ui框架实现的头像上传替换功能,用到了封装的图片压缩封装之后再去上传图片this.$imgUpload.imgZip(),本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2022-05-05webstorm提示 @路径 Module is not installed的问题
这篇文章主要介绍了webstorm提示 @路径 Module is not installed的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-11-11vue.config.js中configureWebpack与chainWebpack区别及说明
这篇文章主要介绍了vue.config.js中configureWebpack与chainWebpack区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09vue以组件或者插件的形式实现throttle或者debounce
这篇文章主要介绍了vue以组件或者插件的形式实现throttle或者debounce,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论