vue高级组件之provide与inject使用及说明
vue provide与inject使用及说明
vue中不同组件通信方式如下
- 1.父子组件，通过prop
- 2.非父子组件，通过vuex或根vue转载器
通常是以上两种情况，然而还有一种比较特殊的情况，即孙子组件或更深层次的组件通信
1.下面是a.vue
<template> <div class="test"> <son prop="data"></son> </div> </template>
2.下面是son.vue
<template>
<div>
<grandson prop="data"></grandson>
</div>
</template>
<script>
export default {
name: 'Son',
props: ['data'],
}
</script>很容易看出，如果父组件需要与grandson通信，除了vuex，必须先与son组件通信，再由son与grandson通信，在层级比较少的情况下也无可厚非，但是层级一旦多起来是很可怕的
有人会问为什么不用vuex，简单省事，有很多为了这个引入vuex会导致代码性价比比较低，项目本身没有使用vuex的必要
那么这种情况下provide / inject就登场了
- 1.provide就相当于加强版父组件prop
- 2.inject就相当于加强版子组件的props
因为以上两者可以在父组件与子组件、孙子组件、曾孙子...组件数据交互，也就是说不仅限于prop的父子组件数据交互，只要在上一层级的声明的provide，那么下一层级无论多深都能够通过inject来访问到provide的数据
1.父级组件如下
<template>
<div class="test">
<son prop="data"></son>
</div>
</template>
<script>
export default {
name: 'Test',
provide: {
name: 'Garrett'
}
}2.孙子组件，注意这里是孙子组件，父级 -> 子组件 -> 孙子组件三个层级关系
<template>
<div>
{{name}}
</div>
</template>
<script>
export default {
name: 'Grandson',
inject: [name]
}
</script>这里可以通过inject直接访问其两个层级上的数据，其用法与props完全相同，同样可以参数校验等
缺点
这么做也是有明显的缺点的，在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用能用vuex的使用vuex，不能用的多传参几层，但是在做组件库开发时，不对vuex进行依赖，且不知道用户使用环境的情况下可以很好的使用
vue3中父子组件传值(provide/inject)
在vue3中的父子组件一般都用provide 和 inject 传值
父组件中引入和注册了子组件之后
在script标签下引入provide就可以将父组件中的变量或方法传递出去
在子组件中就可以用inject来接收一下 不管子组件的层级有多深都可以接收到
具体操作
- provide('变量名'，'变量')
- inject('变量名')
- provide('事件名','事件')
- inject('事件名','事件')
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程, 在开发中,如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了vue为什么v-for的优先级比v-if高原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
今天小编就为大家分享一篇解决vue中post方式提交数据后台无法接收的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本篇文章主要介绍了Vuex提升学习篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue移动端UI框架实现仿qq侧边菜单组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-03-03
vue webpack build资源相对路径的问题及解决方法
这篇文章主要介绍了vue webpack build资源相对路径的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了Vue中直接操作数组索引不奏效的问题解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue源码之rollup环境搭建步骤详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue 条件渲染v-if和v-show，在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的，有时候我们想要在一个条件中加载多个html元素，那么我们可以通过template元素上实现，下面就来看看具体实现吧2021-10-10
Vue3 Element-plus el-menu无限级菜单组件封装过程
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装，这篇文章主要介绍了Vue3 Element-plus el-menu无限级菜单组件封装,需要的朋友可以参考下2023-04-04
最新评论