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('事件名','事件')
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Pinia 是2019年由vue.js官方成员重新设计的新一代状态管理库,类似Vuex,下面我们就来学习一下如何通过Pinia实现持久化存储的相关知识,感兴趣的小伙伴可以了解下2023-12-12
Vue中使用require.context自动引入组件的操作方法
require.context 是 webpack 提供的一个API,用于创建context,即一组具有相同上下文的模块,使用 require.context 可以方便地加载多个模块,并且可以灵活地控制模块的加载顺序和依赖关系,本文给大家讲解Vue中使用require.context自动引入组件的方法,感兴趣的朋友一起看看吧2024-01-01
Vue.js是一个专注于视图模型(ViewModal)的框架。接下来给大家带来了vue.js快速入门教程，非常不错，具有参考借鉴价值，一起看看吧2016-09-09
这篇文章主要介绍了详解vue-cli项目中的proxyTable跨域问题小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue中的计算属性传参，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue打包程序部署到Nginx 点击跳转404问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了Vue 事件处理操作,结合实例形式较为详细的分析了vue.js事件处理相关的事件监听、处理、修饰符等相关概念、用法及操作注意事项,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了vue基础之data存储数据及v-for循环用法,结合实例形式分析了vue.js使用data存储数据、读取数据及v-for遍历数据相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了Vue中的高德轨迹回放问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue vant Area组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最新评论