- A+
所属分类：Web前端
本文开始，首先我们来看这两个词的意思，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
