vue中的依赖注入provide和inject简单介绍
作者：萤火之森-Thezero
这篇文章主要介绍了vue中的依赖注入provide和inject简单介绍,provide 选项允许我们指定我们想要提供给后代组件的数据/方法，本文通过组价刷新的案列给大家详细讲解，需要的朋友可以参考下
vue中的依赖注入 provide 和 inject
vue中的依赖注入 provide 和 inject
provide 选项允许我们指定我们想要提供给后代组件的数据/方法。
下面是一个组价刷新的案列
<template>
<div >
<div class="view">
<router-view v-if="isRouterAlive"></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isRouterAlive: true
}
},
provide() {
return {
reload: this.reload
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
}然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：
inject: ['reload']
注：依赖注入所提供的属性是非响应式
vue中的依赖注入provide和inject场景解析（简单易懂）
本文开始，首先我们来看这两个词的意思，provide：提供 inject：注入
用处：
父组件可以向其所有子组件传入数据，而“不管子组件层次结构有多深（非父子和父子咱都能传）”
特性：
父组件有一个provide选项来提供数据
子组件有一个inject选项来开始使用这个数据
本文参考组件层级：
Index组件
\ A组件
\ B组件
代码区：
场景1：我想要Index组件直接给b组件传值
Index组件代码：
<template>
<div>
<div>我是index组件</div>
<A></A>
</div>
</template>
<script>
import A from '@/components/A.vue'
export default {
components: {
A
},
data() {
return {}
},
provide: {
text: '我是父组件的provide信息666'
}
}
</script>
<style></style>接收的B组件代码：
<template>
<div>
<div>我是B组件</div>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
name: 'B',
data() {
return {
msg: this.text
}
},
inject: ['text']
}
</script>
<style></style>当然，provide还有第二种写法，写成函数的形式
Index组件代码：
<template>
<div>
<div>我是index组件</div>
<A></A>
</div>
</template>
<script>
import A from '@/components/A.vue'
export default {
components: {
A
},
data() {
return {
arr: ['1', '2', '3']
}
},
// provide: {
// text: '我是父组件的provide信息666'
// }
provide() {
return {
arr: this.arr
}
}
}
</script>
<style></style>
B组件代码：
<template>
<div>
<div>我是B组件</div>
<div>{{ msg }}</div>
<ul v-for="(item, index) in arr" :key="index">
<li>{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'B',
data() {
return {
msg: this.text
}
},
inject: ['arr']
}
</script>
<style></style>
运行截图：
对比：
如果使用常见的props方式传值需要：index->a->b
如果使用provide/inject方式传值：index->a index->b
本文如有错误，还望各位批评指针，希望能帮助到大家更好的理解vue的provide和inject
到此这篇关于vue中的依赖注入provide和inject简单介绍的文章就介绍到这了,更多相关vue依赖注入provide和inject内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！