在Vue中我们可以很方便的通过父组件往子组件传递属性，Props是我们将数据传递到子组件的主要方式之一。例如，下面的代码，我们往子组件（PopularList ）传递了属性 name,其值是Most Popular Posts。在PopularList中我们可以通过name访问数据。

<PopularList name="Most Popular Posts" />

但是有时子组件中可以包含子组件，如果我们想将数据从父组件传递到孙子组件，最简单的方法就是使用provide/reject。这种方式的好处是：我们不需要将属性先传给子组件，再传给孙子组件。就像Parent → Child → GrandChild。我们可以简单地将它传递为Parent → Grandchild，如下图所示：

Vue中如何使用provide和inject

如果你使用的是composition API。可以直接使用provide 方法传递任何形式的数据。

<script setup>import { provide } from 'vue'provide('myKey', 'message');
</script>

provide函数接收两个参数 - 值和键。上面的例子中，键是mykey，值是message。和props一样，这个是可以是对象，数字或其他任何有效类型的数据。使用ref，我们还可以将这个属性设置为响应式。

<script setup>import { provide, ref } from 'vue'const message = ref('message');provide('myKey', message);
</script>

如果使用的是Options API，则可以使用以下结构在组件中提供数据。

export default {provide: {myKey: 'message'}
}

在 Vue 中使用注入访问父数据

在上面的例子中，我们说明了如何在父组件中传值。我们在孙子组件中，该如何获取到这个值，我们可以使用inject来访问属性。例如，假设我们有一个如下所示的 Vue 组件：

<script setup> import { ref, provide } from 'vue'import ChildElement from './Child.vue';const message = ref('message');provide('myKey', message); </script>
<template><p>Hello World!</p><ChildElement />
</template>

然后是一个Child.vue看起来像这样的子组件：

<script setup> import GrandChildElement from './GrandChildElement.vue'; </script>
<template><GrandChildElement />
</template>

在GrandChildElement中，我们可以访问myKey，因为我们在父级中provide了它。我们可以在 Child.vue中这样做，但我们也可以只使用inject。provide使我们能够从多个级别获取数据。要访问这些数据GrandChildElement，我们使用inject. 我们的GrandChildElement.vue文件可能看起来像这样：

<script setup> import { inject } from 'vue'
const message = inject('myKey') </script>

const message这里将返回文本message，因为这是我们设置myKey的provide。如果使用的是 Options API，则可以改为

export default {inject: [ 'myKey' ],created() {// Can access this.myKey here}
}

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

Vue 之 provide和inject的使用相关推荐

vue 中 provide 和 inject 共享数据
project 和 inject 是 vue 2.2.0 新增内容.官网说明 >> https://cn.vuejs.org/v2/api/#provide-inject 1. 概述后代 ...
vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
vue中provide和inject 用法
我们平时在开发的时候,最常用的父子组件通信方式就是父组件绑定要传递给子组件的数据,然后子组件通过props属性接收.但是一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便 ...
vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
Vue项目provide和inject的使用
provide,inject也是组件通信的一种方式,它是父组件向其他子组件,孙组件通信的一种方式父组件,father.vue <template><div><child ...
vue的provide和inject特性
由来组件之间的通信可以通过props和$emit的方式进行通信,但是如果组件之间的关系非常复杂的话,通过以上的方式会很麻烦,并且程序会非常脆弱,没有建中性可言. 在vue2.2.0 中新增provi ...
provide和inject，Vue父组件直接给孙子组件传值
Provide / Inject 该页面假设你已经阅读过了组件基础.如果你还对组件不太了解,推荐你先阅读它. 通常,当我们需要从父组件向子组件传递数据时,我们使用 props.想象一下这样的结构:有一 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
[vue] 说说你对provide和inject的理解
[vue] 说说你对provide和inject的理解通过在父组件中inject一些数据然后再所有子组件中都可以通过provide获取使用该参数,主要是为了解决一些循环组件比如tree, menu, ...

Vue 之 provide和inject的使用

Vue中如何使用provide和inject

在 Vue 中使用注入访问父数据

最后

Vue 之 provide和inject的使用相关推荐

最新文章

热门文章