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

标签: Javascript

添加新评论