vue中的依赖注入provide和inject(简单易懂)

  • vue中的依赖注入provide和inject(简单易懂)已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

本文开始,首先我们来看这两个词的意思,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>

运行截图:

vue中的依赖注入provide和inject(简单易懂)

 

 

 

 

 

 

 

对比:

如果使用常见的props方式传值需要:index->a->b

如果使用provide/inject方式传值:index->a   index->b

 

本文如有错误,还望各位批评指针,希望能帮助到大家更好的理解vue的provide和inject