首页 > 其他分享 >vue3中的provide和inject实现组件间通讯

vue3中的provide和inject实现组件间通讯

时间:2022-09-26 14:44:45浏览次数:63  
标签:vue provide inject vue3 组件 我们

在vue2中我们已经使用过provide和inject来实现祖孙组件之间的数据传递,但是在vue3中由于我们使用setup,此时我们应该如何去使用provide和inject函数呢?

在vue中帮我们提供了provide和inject的函数,我们可以直接在setup函数中使用即可。

一、provide和inject的基本使用

如上图所示,此时我们将一个普通对象进行传递,然后在Home组件中通过inject函数来接收。我们也可以通过ref和reactive进行传递。


上面代码我们可以看出在Home.vue文件中可以更改App.vue通过provide传递过去的数据,但是在一些情况下,我们是不允许的,此时我们可以采用readonly来进行设置。

如果我们确实希望改变父组件的数据,此时我们可以在父组件中设置方法,通过provide将该方法传递给子组件,保证数据是数据提供的位置进行修改。

 

 

 

————————————————
版权声明:本文为CSDN博主「卖菜的小白」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_47450807/article/details/122925805

标签:vue,provide,inject,vue3,组件,我们
From: https://www.cnblogs.com/suihung/p/16730918.html

相关文章

  • vue3 页面跳转
    需要引入useRouterimport{useRouter}from"vue-router";然后声明对象代码如下exportdefault{setup(){const$router=useRouter();......
  • vue3中watch和watchEffect的区别
    1、watch需要明确监听哪个属性2、watchEffect会根据其中的属性,自动监听其变化3、watcheffect初始化时,一定会执行一次(收集要监听的数据,不然不知道监听的是什么),watch只有你......
  • vue3的vuex简单配置
    vuex目录文件内容【store/index.js】import{createStore}from"vuex";importmodulesfrom"./modules";constsetupStore=(app)=>{letstoreOptions......
  • JeecgBoot 3.4.2 版本发布,Vue3版本大升级
    项目介绍JeecgBoot是一款企业级的低代码平台!前后端分离架构SpringBoot2.x,SpringCloud,AntDesign&Vue,Mybatis-plus,Shiro,JWT支持微服务。强大的代码生成器让前后端代码一......
  • vue3 基础-传送门 teleport
    之前介绍了一波混入mixin和自定义指令directive其基本作用就是为了在vue中实现代码的复用.而本篇介绍的是vue3的一个新特性叫做传送门.一听这个名字是不是就感......
  • 【Vue项目实践】(vue3 + Element Plus)excel 导出
    安装依赖yarnadd--savexlsxfile-saver1、添加导出按钮以及点击事件<el-buttontype="primary"round@click="exportClick">导出表格</el-button>2、在table表......
  • 【Vue项目实践】套用github 上的项目(vue3 + Element Plus)运行 可编辑表格
    在Vue3+ElementPlus中生成动态表格gitclonehttps://github.com/kalacloudCode/how-to-build-dynamic-table-in-vue-element-plus.git参考博客:vue3+Element......
  • vue3 基础-自定义指令 directive
    上篇内容是关于mixin混入的一些操作,也是关于代码复用层面的,本篇讲自定义指令directive也是为了实现复用而设计的一些小功能啦.先来看看,如果不用directive的场......
  • vue3和react虚拟DOM的diff算法区别
    vue3随着Vue3.0版本的发布,我们在使用或者对其源码进行阅读时会惊讶的发现,它又又又双叒叕变强了,尤大本人在直播中也提到新的Vue会比老的Vue有1.3到2倍的提升,它的更新机制会......
  • vue3 基础-Mixin
    本篇开始来学习一波vue中的一些复用性代码的基础操作,首先来介绍关于代码"混入"mixin的写法.直观理解这个mixin就是一个js对象去"混入"vue的组件呀,插件呀......