vue中的依赖注入provide和inject简单介绍

更新时间：2022年11月06日 11:03:49 作者：萤火之森-Thezero

这篇文章主要介绍了vue中的依赖注入provide和inject简单介绍,provide 选项允许我们指定我们想要提供给后代组件的数据/方法，本文通过组价刷新的案列给大家详细讲解，需要的朋友可以参考下

vue中的依赖注入 provide 和 inject

在这里插入图片描述

provide 选项允许我们指定我们想要提供给后代组件的数据/方法。

下面是一个组价刷新的案列

<template>
  <div >
    <div class="view">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRouterAlive: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：

inject: ['reload']

注：依赖注入所提供的属性是非响应式

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

到此这篇关于vue中的依赖注入provide和inject简单介绍的文章就介绍到这了,更多相关vue依赖注入provide和inject内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue配置别名alias在webstorm不生效问题及解决
这篇文章主要介绍了vue配置别名alias在webstorm不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
el-table表格动态合并相同数据单元格(可指定列+自定义合并)
工作时遇到的el-table合并单元格的需求，本文主要介绍了el-table表格动态合并相同数据单元格(可指定列+自定义合并)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
Vue3中使用Pinia修改State的五种方式
这篇文章主要介绍了Vue3中使用Pinia修改State的五种方式,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
2023-11-11
Vue表单预校验 validate方法不生效问题
这篇文章主要介绍了Vue表单预校验 validate方法不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue2中基于vue-simple-upload实现文件分片上传组件功能
这篇文章主要介绍了vue2中基于vue-simple-upload的文件分片上传组件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
vue 粒子特效的示例代码
本篇文章主要介绍了vue 粒子特效的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue3自定义插件的作用场景及使用示例详解
这篇文章主要为大家介绍了vue3自定义插件的作用场景及使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue3中emit('update:modelValue')使用简单示例
这篇文章主要给大家介绍了关于vue3中emit('update:modelValue')使用的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-09-09
vue如何将html内容转为图片并下载到本地
这篇文章主要介绍了vue如何将html内容转为图片并下载到本地，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
ant-design-vue中的table自定义格式渲染解析
这篇文章主要介绍了ant-design-vue中的table自定义格式渲染，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10