vue中的provide/inject你知道吗(vue2、vue3)?

这篇具有很好参考价值的文章主要介绍了vue中的provide/inject你知道吗(vue2、vue3)?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

vue2基本用法:

1.provide

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

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

vue中的provide/inject你知道吗(vue2、vue3)?

 在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,
    },
  },
};

vue中的provide/inject你知道吗(vue2、vue3)?

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


num 不是响应式的

 vue中的provide/inject你知道吗(vue2、vue3)?

 点击+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文章来源地址https://www.toymoban.com/news/detail-477992.html

到了这里,关于vue中的provide/inject你知道吗(vue2、vue3)?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3-provide和inject

    1.作用场景: 顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信 2.跨层传递普通数据 1.顶层组件通过provide函数提供数据 2.底层组件通过inject函数获取数据 顶层组件 底层组件 3.跨层传递响应数据 顶层组件 底层组件 4.跨层传递方法 顶层组件可以向底层组件传递方

    2024年01月19日
    浏览(45)
  • VueUse 是怎么封装Vue3 Provide/Inject 的?

    Provide 和 Inject 可以解决 Prop 逐级透传问题。注入值类型不会使注入保持响应性,但注入一个响应式对象,仍然有响应式的效果。 Provide 的问题是无法追踪数据的来源,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层

    2024年02月03日
    浏览(41)
  • Vue3的组合式API中如何使用provide/inject?

    听说 Vue 3 加入了超多酷炫的新功能,比如组合式 API 等等。今天我们就来聊聊 Vue 3 中的组合式 API,并且如何使用 provide/inject 来搞定它! 首先,我们来了解一下组合式 API 是什么。其实,组合式 API 就是一个用来构建和组合函数的工具,它能让我们的代码更加简洁、可读性更

    2024年02月11日
    浏览(42)
  • 【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)

    写法一(vue3的写法) toRefs定义: toRefs可以将对象(只能接收rective对象)中的属性变成响应式。 正常reactive对象数据也是响应式的,如果用toRefs解构出去会更加方便。 toRefs什么时候用? 数据量如果很多, 我们一般会用解构来简化代码, 那么在vue3 中如果使用对象的解构,

    2024年02月13日
    浏览(44)
  • Vue 中的依赖注入,特别是 Provide 和 Inject,它们的原理、用法和示例

    Vue.js 作为一款现代的前端 JavaScript 框架,提供了诸多方便开发的特性。其中依赖注入是一个非常有用的功能,可以在组件树中传递数据和方法,并使得组件之间的耦合度更低。本文将介绍 Vue 中的依赖注入,特别是 Provide 和 Inject,它们的原理、用法和示例。 在软件开发中,

    2024年02月06日
    浏览(42)
  • 你不知道的vue3:使用runWithContext实现在非 setup 期间使用inject

    日常开发时有些特殊的场景需要在非 setup 期间调用 inject 函数,比如app中使用 provide 注入的配置信息需要在发送 http 请求时带上传给后端。对此我们希望不在每个发起请求的地方去修改,而是在发起请求前的拦截进行统一处理,对此我们就需要在拦截请求的函数中使用 injec

    2024年01月17日
    浏览(48)
  • vue3中的provide

    作用:实现祖孙件通信 套路:父组件有一个provide选项来提供数据,子组件有一个inject选项来开始使用这些数据 具体写法: 祖组件中: child: run: 当然,如果存在子组件的子组件,也是可以直接获取到其上一级上一级的组件 child: childchild:

    2024年02月13日
    浏览(76)
  • vue学习,使用provide/inject通信

    提示:组件的provide,可以被其内所有层级的组件,通过inject引用 需求:使用provide/inject通信 1、AA.vue 2、BB.vue 3、CC.vue 4、DD.vue AA组件引用BB组件 BB组件引用CC组件 CC组件引用DD组件 BB、CC、DD都可以通过 inject 获取到AA的 provide provide与inject之间的通讯,既可以传输数据,也可以传

    2024年01月18日
    浏览(54)
  • 【Vue】父子组件传参 && 孙子调用爷爷的方法 provide inject

    一. 父传子 父组件先在data中定义要传给子组件的属性名 父组件在中引入子组件 在components中注册 使用步骤 3 中注册好的子组件 在 3 中,父传子 (1)利用 : 将父组件的对象、数组、字符串等传给子组件,供子组件使用 (2)利用 @ 将父组件的方法传给子组件,供子组件调用

    2024年02月08日
    浏览(48)
  • vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式

    通常,当我们需要从父组件向子组件传递数据时,我们使用 props。但是对于一些深度嵌套的组件,深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。 provide 和 inject无论组件层次结构有多深,父组件都可以作为其

    2024年02月14日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包