vue2和vue3中provide/inject的基本用法示例

更新时间：2023年04月23日 11:15:34 作者：wyy爱学习

Vue中的provide/inject是一种组件间通信的方式,它允许父组件向子组件传递数据,而不需要通过props或事件来实现,下面这篇文章主要给大家介绍了关于vue2/vue3中provide/inject的基本用法的相关资料,需要的朋友可以参考下

前言

昨天看一个项目代码看到了provide，但是学习的时候也没看到，看了官网才知道vue还有这个API。多数情况下，provide会和inject一起使用，又叫“依赖注入”。

“依赖注入”主要是解决父子组件传值“props逐级传递”问题。所以，provide/inject的作用就是组件间的传值。

vue2基本用法：

1.provide

provide 是一个对象或是返回一个对象的函数。

写在祖先组件中，用于提供给子组件可以注入的值。组件的关系为a-b-c-d

在a组件中将参数num进行传递

export default {
  components: { BCom },
  data() {
    return {
      num: 2,
    };
  },
  provide() {
    return {
      num: this.num,
    };
  },
};

2.inject

inject为：一个数组，数组元素为注入的变量

一个对象，key为注入的变量，value为一个包含form和default的对象
num: {
   from: 'num',
   default: '20'
}

在d组件中接收注入的变量

写法一：

export default {
  inject: ["num"],
};

写法二：

export default {
  inject: {
    num: {
      form: "num",
      default: 20,
    },
  },
};

可以看到d中显示的为inject注入的num变量。如果在a中不进行provide，则会显示默认值。

num 不是响应式的

点击+100按钮，a组件显示的值改变，d组件显示的值没有改变。

如何成为响应式？

1.方法一：函数方法

a组件：

<template>
  <div style="width: 600px; height: 600px; background-color: darkgreen">
    我是组件a
    <h4>{{ num }}</h4>
    <button @click="add">+100</button>
    <BCom></BCom>
  </div>
</template>
 
<script>
import BCom from "./b-com.vue";
export default {
  components: { BCom },
  data() {
    return {
      num: 2,
    };
  },
  provide() {
    return {
      num: () => this.num,
    };
  },
  methods: {
    add() {
      this.num = this.num + 100;
    },
  },
};
</script>
 
<style>
</style>

b组件

<template>
  <div
    style="
      width: 300px;
      height: 300px;
      background-color: bisque;
    "
  >
    我是组件d
    <h4>{{ this.num() }}</h4>
  </div>
</template>
  
  <script>
export default {
  inject: {
    num: {
      form: "num",
      default: () => {},
    },
  },
};
</script>
  
  <style>
</style>

2.方法二：传递this

a组件

<template>
  <div style="width: 600px; height: 600px; background-color: darkgreen">
    我是组件a
    <h4>{{ num }}</h4>
    <button @click="add">+100</button>
    <BCom></BCom>
  </div>
</template>
 
<script>
import BCom from "./b-com.vue";
export default {
  components: { BCom },
  data() {
    return {
      num: 2,
    };
  },
  provide() {
    return {
      AThis: this,
    };
  },
  methods: {
    add() {
      this.num = this.num + 100;
    },
  },
};
</script>
 
<style>
</style>

d组件

<template>
  <div
    style="
      width: 300px;
      height: 300px;
      background-color: bisque;
    "
  >
    我是组件d
    <h4>{{ this.AThis.num }}</h4>
  </div>
</template>
  
  <script>
export default {
  inject: {
    AThis: {
      form: "AThis",
      default() {
        return {};
      },
    },
  },
};
</script>
  
  <style>
</style>

vue3的基本用法：

provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。

<script setup>
import { ref, provide } from 'vue'
 
// 提供静态值
provide('num')
 
// 提供响应式的值
const count = ref(0)
provide('count', count)
 
</script>

inject:

        第一个参数是注入的 key。

        Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。

        第二个参数是可选的，即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。

<script setup>
import { inject } from 'vue'
 
// 注入值的默认方式
const num= inject('num')
 
// 注入响应式的值
const count = inject('count')
 
// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')
 
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())
 
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)
</script>

注：在d组件中，如果data中存在变量num，inject又注入了变量num，在页面中会显示data中num的值。

参考：组合选项 | Vue.js

总结

到此这篇关于vue2和vue3中provide/inject的基本用法的文章就介绍到这了,更多相关vue中的provide/inject内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3如何通过ESLint校验代码是否符合规范详解
ESLint可以灵活设置规则,也发布了很多公开的规则集,下面这篇文章主要给大家介绍了关于Vue3如何通过ESLint校验代码是否符合规范的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-07-07
基于vue实现探探滑动组件功能
这篇文章主要介绍了基于vue实现探探滑动组件功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
vue中将html字符串转换成html后遇到的问题小结
这篇文章主要介绍了vue中将html字符串转换成html后遇到的问题小结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
Vue全局自适应大小:使用postcss-pxtorem方式
本文介绍了如何在Vue项目中使用postcss-pxtorem插件实现响应式设计,postcss-pxtorem可以自动将CSS文件中的px单位转换为rem单位,从而实现更好的自适应布局,通过配置postcss-pxtorem插件,可以在构建时自动完成转换,无需手动修改代码
2025-01-01
vue 循环加载数据并获取第一条记录的方法
今天小编就为大家分享一篇vue 循环加载数据并获取第一条记录的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue三元运算之多重条件判断方式(多个枚举值转译)
这篇文章主要介绍了vue三元运算之多重条件判断方式(多个枚举值转译)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue.js指令v-for使用及索引获取
这篇文章主要为大家详细介绍了vue.js中v-for使用及索引获取,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
Vue中安装element-ui失败问题原因及解决
Vue中安装element-ui失败问题原因及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue.js集成Word实现在线编辑功能
在现代Web应用中,集成文档编辑功能变得越来越常见,特别是在协作环境中,能够直接在Web应用内编辑Word文档可以极大地提高工作效率,本文将详细介绍如何在Vue.js项目中集成Word在线编辑功能,需要的朋友可以参考下
2024-08-08
利用Vue模拟实现element-ui的分页器效果
这篇文章主要为大家详细介绍了如何利用Vue模拟实现element-ui的分页器效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下
2022-11-11