前言

provide和inject在Vue 2中已经被广泛应用，不是新鲜API，3.0重新认识一下它们两个。

一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。

在组合式API中的用法

基本用法

似乎，组合式API的provide没有提供批量方法，只能每个变量写一句。

顶级组件：

<template><div><son /></div>
</template><script setup>
import son from "./son.vue";
import { provide } from "vue";
provide("abc", "123");
</script>

子组件：

<template><div><grandson /></div>
</template><script setup>
import grandson from "./grandson.vue";
</script>

孙组件：

<template><div>我是孙子</div>
</template><script setup>
import { inject } from "vue";
const abc = inject("abc");
console.log(abc);
</script>

官方说：

inject() can only be used inside setup() or functional components.

这个意思是说，inject()只能放在setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行。所以你可以先在setup()周期取值。

例一：这是允许的，因为console.log是setup()生命周期里的同步代码

function xx() {console.log(inject("abc"))
}
xx()

例二：这是禁止的，因为setTimeout是异步函数，执行console.log(inject(“abc”))的时候已经不在setup()生命周期里。

function xx() {setTimeout(() => {console.log(inject("abc"))})
}
xx()

例三：让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样。

例四：放在Promise.then()也是禁止的，比如

Promise.resolve().then(() => {console.log(inject("abc"))
})

Vue 3的provide和inject用法相关推荐

vue中provide和inject 用法
我们平时在开发的时候,最常用的父子组件通信方式就是父组件绑定要传递给子组件的数据,然后子组件通过props属性接收.但是一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便 ...
vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
vue 3 学习笔记 (八)——provide 和 inject 用法及原理
在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...
VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
provide和inject 用法
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的斜体样式时间里始终生效. 使用场景:由于vue有$parent属性可以让子组件访问父组件 ...
vue 中provide的用法_vue 中的 provide 和 inject 用法
provider/inject:简单来说就是在父组件 provide 中提供变量,子组件 inject 中来注入,然后可以在子组件内部使用 provide 的变量需要注意的是这里不论子组件有多深,只 ...
vue3 provide 与 inject 用法
1 说明: provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们可以使用inject来接收provide提供的数据和方法. 2 用法: 父亲组件 < ...

Vue 3的provide和inject用法

了解Vue 3的provide和inject用法

前言

在组合式API中的用法

基本用法

Vue 3的provide和inject用法相关推荐

最新文章

热门文章