首页 > 其他分享 >组件间通信provide和inject

组件间通信provide和inject

时间:2024-10-10 11:12:40浏览次数:10  
标签:provide car 间通信 TOKEN inject 组件 孙子

vue3提供两种方法,分别为(爷爷提供)provide(提供)和(孙子)inject(注入)。

可以实现隔辈传入数据,且孙子组件可以修改爷爷提供的数据。

即如果子组件再调用子组件,那么父组件可以通过provide 和 inject来实现父孙志坚消息通行。

①实现父子组件调用子组件, 子组件再调用子组件

②父组件通过provide孙子组件提供数据

import { ref,provide } from 'vue';
let car = ref('法拉利')
// 祖先组件给后代组件提供数据
// provide需要两个参数  第一个参数:提供的数据key    第二个参数:祖先组件提供数据
provide("TOKEN", car)//注意 ,这里是传car不是car.value,如果传car.value就不是响应式的了  下面的图片是错误的,得更正

 ③孙子组件通过inject使用数据

import { inject } from 'vue';
// 注入祖先组件提供的数据  
// 需要的参数:祖先提供的数据

let car = inject('TOKEN')

 ④孙子组件修改父组件的数据

let car = inject('TOKEN')

const handler = ()=>{
  car.value = '飞机'
}

 

标签:provide,car,间通信,TOKEN,inject,组件,孙子
From: https://www.cnblogs.com/yansunda/p/18455878

相关文章

  • 组件间通信--ref与$parent
    ref:给子组件的标签绑定ref属性,子节点把对应的数据暴露出来,可以以此修改子组件的值$parent:子组件通过固定参数,拿到父组件暴露出去定义的方法或者数据,并操作ref的用法:①给子组件标签绑定ref<Sonref="son"></Son>②在子组件中用defineExpose暴露需要被父组件调用的值imp......
  • 组件间通信--自定义事件
    自定义事件实现通信的逻辑是给子组件的标签上绑定一个自定义事件。在子组件中写触发事件,传入实参。在父组件中定义具体事件方法体逻辑。例如:<!--绑定自定义事件xxx,实现子组件给父组件传递数据--><Event2@xxx="handler3"></Event2>在子组件中使用defineEmits方法来触......
  • 使用MessagePipe实现进程间通信
    使用MessagePipe实现进程间通信 1、MessagePipe介绍可以用于.NET和Unity上面的高性能的内存/分布式消息传递管道。适用于发布/订阅模式、CQRS的中介模式、Prism中的EventAggregator、IPC(进程间通信)-RPC等。支持:依赖注入过滤器管道更好的事件同步/异步带键值的/无键值......
  • 嵌入式学习——进程间通信方式(2)—— 信号
    一、基本概念什么是信号:由进程或系统发出的,用来通知发生了某个事件,希望接收方进行响应。    信号是进程间通信机制中唯一的异步通信机制,一个进程不必通过任何操作来等待信号的到达,事实上,进程也不知道信号到底什么时候到达。正如我们所了解的中断服务函数一样,在中断发......
  • path_provider插件的用法
    文章目录1.概念介绍2.实现方法3.示例代码我们在上一章回中介绍了"如何实现本地存储"相关的内容,本章回中将介绍如何实现文件存储.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在上一章回中介绍的本地存储只能存储dart语言中基本类型的数值,如果遇到......
  • 架构设计:系统间通信(17)——服务治理与Dubbo 中篇(分析)
    作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬学习必须往深处挖,挖的越深,基础越扎实!阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • 架构设计:系统间通信(19)——MQ:消息协议(上)
    作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬学习必须往深处挖,挖的越深,基础越扎实!阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • 架构设计:系统间通信(18)——服务治理与Dubbo 下篇(继续分析)
    作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬学习必须往深处挖,挖的越深,基础越扎实!阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • dnsclientpsprovider.dll文件丢失导致程序无法运行问题
    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个dnsclientpsprovider.dll文件(挑选合适的版......
  • WPF Combobox ObjectDataProvider MethodName ObjectType ObjectDataProvider.Metho
    <Window.Resources><ObjectDataProviderx:Key="kindEnum"MethodName="GetValues"ObjectType="{x:Typesys:Enum}"><ObjectDataProvider.MethodParameters><x:Type......