首页 > 其他分享 >provide inject vue3 父子组件 传参方式

provide inject vue3 父子组件 传参方式

时间:2024-06-06 10:05:11浏览次数:12  
标签:传参 provide hooks inject vue3 组件

provide inject vue3 父子组件 传参方式
当子组件有30个的时候,这个就有优势了,在父组件provide一次,在子组件里面inject这个变量(实际上是通过hooks提供,也可以是个函数)。
下面看下截图

父组件:

子组件:

父组件provide

子组件在父组件,就不用一堆props

这里有一个特别的好处就是结构看的特别清晰,我现在的代码都走props,一屏幕可能就显示2个组件,要是看个结构,不停的滚轮

子组件获取对象通过hooks,vue2可以换成函数

hooks 这个是所有子组件共用,也就是说,所有的inject都是写在这个hooks,
provide和inject都写了一次,非常巧妙!

reference:
https://github.com/nihaojob/vue-fabric-editor

标签:传参,provide,hooks,inject,vue3,组件
From: https://www.cnblogs.com/pengchenggang/p/18234492

相关文章

  • 如何在Vue3中使用provide/inject实现跨组件状态共享?
    在前端开发中,组件之间的状态管理和数据共享是一个常见且重要的话题。Vue3作为一个流行的前端框架,提供了多种方法来解决这个问题。今天,我们将深入探讨在Vue3中使用provide和inject来实现跨组件状态共享的方法。什么是provide/inject?provide和inject是Vue3中提供的一种机制,......
  • 函数的多返回值、函数多种传参方式 学会啦!继续学习~
    1.函数的多返回值如果一个函数要有多个返回值,该如何书写代码? 按照返回值的顺序,写对应顺序的多个变量接收即可,变量之间用逗号隔开,支持不同类型的数据return#演示使用多个变量,接受多个返回值deftest_return():return1,2,3x,y,z=test_return()print(x)pr......
  • 第十九节:带你梳理Vue2: 父组件向子组件传参(props传参)
    1.组件嵌套1.1组件的嵌套使用之前有说过,Vue组件跟Vue实例是一样的,因此在Vue中一个组件中也可以定义并使用自己的局部组件,这就是组件的嵌套使用例如:示例代码如下:<divid="app"><!--3.使用组件--><my-component></my-component></div><script>......
  • FastAdmin 后端控制器与前端页面传参
    1.菜单让链接带参 2.控制器传参数到前端JS$this->assignconfig('tab',$tab); 3.JS传参回后端index_url:'contract/contract/index/tab/'+Config.tab, ......
  • Microsoft.Extensions.DependencyInjection会自动释放通过DI(依赖注入)创建的对象
    Microsoft.Extensions.DependencyInjection中(下面简称DI),在调用ServiceProvider和IServiceScope对象的Dispose()方法时,也会自动调用ServiceProvider和IServiceScope对象通过DI创建的对象的Dispose()方法(前提是,通过DI创建的对象实现了IDisposable接口)。我们新建一个.NETCore控制台......
  • 【swagger】@ApiImplicitParam注解Integer类型required=true时不能提交、@ApiImplicit
    文章目录一、问题描述二、问题原因三、解决方法3.1、修改dataType=int3.2、修改dataType=Long3.3、修改dataType类型为String类型3.4、当dataType类型为Integer时,删除required=true以下内容基于swagger2.9.2进行讲解<!--swagger2--><dependency> <groupId>io.sp......
  • error: no configuration has been provided, try setting KUBERNETES_MASTER environ
    1:问题kubernetes集群,一台master,一台node1,一台node2,重启电脑后,node1节点和node2节点报错如下error:noconfigurationhasbeenprovided,trysettingKUBERNETES_MASTERenvironmentvariable2:解决方法2.1:查看master节点进入到该目录下cd/etc/kubernetes把admi......
  • Shell阶段07 退出循环指令(示例:分发主机公钥), 函数应用(参数传参)
    退出循环的语句#1.exit退出循环,退出脚本#2.break结束当前循环,或者跳出本地循环,继续执行循环外面的命令#3.continue忽略本次循环剩余的代码,直接执行下一次循环#4.案例先扫描内网网段的所有主机,存活的主机进行发放本机的公钥1.本机是否要有公钥,创建密钥对rm2.......
  • 两个跨域页面进行跳转传参的终极方案
    本文约定:A页面:跳转前的原来页面,假设为a.comB页面:将要跳转的目标页面,假设为b.com一、简单方案说到页面跳转,首先想到的就是用a标签://在A页面点击链接,并将参数data传到B页面<ahref="http://b.com?data=1"target="_blank"/>//在B页面接收A页面传过来的参数<script>va......
  • DVWA-SQL Injection (Blind)
    SQL盲注的两种主要形式是基于布尔的盲注和基于时间的盲注,本篇主要记录盲注的知识,基础知识可以参考DVWA-SQLInjectionLow首先进行注入点测试,此处是字符型注入布尔盲注攻击者通过注入条件语句,利用应用程序中基于布尔条件的判断来获取有关数据库内容的信息。攻击者可以尝......