vue中的依赖注入provide和inject（简单易懂）

IT技术2年前 (2022)更新 IT大王

0 24

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

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com