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