Vue privide 和inject 依赖注入的使用详解
更新时间：2022年10月31日 15:59:00 作者：技术杨
这篇文章主要介绍了Vue privide 和inject 依赖注入的用法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
前言
关于Vue组件的通讯方式如下：
- 父子组件：通过prop，$ emit，【$ root，$ parent，$ children】；
- 非父子组件：vuex，父子层层传递、中央事务总线bus，$ref。
vue官网建议，在正常情况下，上述方式已经能满足绝大多数甚至所有的业务需求，对于应用程序代码应优先使用它们处理。然而，还有一种主要为 高阶插件/组件库 提供的用例办法，即 provide / inject （这对选项需要一起使用）。
from表示在可用的注入内容中搜索用的 key，default当然就是默认值。
示例
// 父级组件提供'foo'
var Provider = {
provide:{
foo:'bar'
},
//...
}
子组件注入'foo'
var Child = {
inject:['foo'],
created(){
console.log(this.foo) // =>"bar"
}
//...
}
项目案例
父组件
项目最外层的布局组件layout.vue
<template>
<div>
<!--主内容-->
<router-view></router-view>
</div>
</template>
<script>
export default{
name:'layout',
provide(){
return{
layout:this//这里的this值当前layout组件实例
box:'world'
}
},
data(){
return{
test:'hello'
}
},
}
</script>
这里就是我们说的provide，向下提供信息，这里提供的是当前的vue实例，相当于给了后代一个接口。
这样在任何的后代组件中，都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性。
子组件
layout.vue 组件内的router-view 可能路由进来很多其它子孙组件，比如order.vue
<script>
export default {
name:'order',
inject:['layout','box'],
created(){
console.log(this.layout.test);//hello
console.log(this.box);//world
}
}
这样也就可以访问了，当做当前vue实例的属性。这样做的好处，相当于给了一个捷径，不用使用$parent一级一级的访问。
我们可以把依赖注入看做一部分“大范围有效的prop”，除了
祖先组件不需要知道哪些后代组件需要使用它提供的属性后代组件不需要知道被注入的属性来自哪里
到此这篇关于Vue privide 和inject 依赖注入的用法的文章就介绍到这了,更多相关Vue privide 和inject内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了3种vue组件的书写形式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue弹出框组件封装，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
最近公司新启动了个项目，用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
在本篇文章里小编给各位整理的是关于Vue打包后访问静态资源路径问题相关知识点，需要的朋友们学习下。2019-11-11
在Vue核心中除了响应式原理外,视图渲染也是重中之重,下面这篇文章主要给大家介绍了关于Vue组件的渲染流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要给大家介绍了关于vue.js打包之后可能会遇到的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-06-06
vue中input type=file上传后@change事件无效的解决方案
这篇文章主要介绍了vue中input type=file上传后@change事件无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本篇文章主要介绍了vue-cli实现多页面多路由的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
在平时vue开发中,我们经常会用到计算属性(计算属性只有在它的相关依赖发生改变时才会重新求值)来计算我们需要的数据,下面这篇文章主要给大家介绍了关于vue中动态参数与计算属性使用的相关资料,需要的朋友可以参考下2021-08-08
最新评论