当前位置: 首页 > news >正文

如何监控多个进程的存活和CPU、内存占用

窃迂该鄙二次封装组件需要考虑的3个重要的问题

1,props 如何进行传递

2,插槽如何穿透

3,暴露实例以及实例中的方法

在vue3中的$attrs的变化

vue3中$listeners已被删除合并到$attrs中。

vue3的$attrs现在包括class和style属性。

vue2中不包含class和style属性。

也就是说:当子组件写上 v-bind="$attrs"

父组件就可以使用子组件的内置事件和内置属性了。

下面我们会详细说一下$attrs

props 如何进行传递属性和事件

我们可以在子组件中使用 v-bind="$attrs"

这样可以把父组件中的属性传递给子组件了

// 子组件

// 父组件

01

01-1

如何解决写组件时没有属性提示的问题

我们发现一个问题:在父组件中的组件写相关属性时,没有属性提示。

// 子组件

这样父组件在使用的时候,就可以看到属性提示了。

插槽如何封装1: 通过 template 来封装插槽

// 父组件

.com

02

暴露实例以及实例中的方法

我们可以通过 defineExpose 来暴露实例以及方法【常用的】

也可以通过vm.exposed来进行暴露实例以及方法

需要注意组件最初设置了v-if=false这种情况

// 子组件

// 父组件

.com

清空值

03

04

另外一种暴露方式

常见的暴露方式

defineProps({

name:xxx,

age:xxx,

})

等价与下面这一种

vm.exposed= {

name:xxx,

age:xxx,

}

vue3 中的 props

props 是组件的自定义属性,用于从父组件向子组件传递数据。

props 不会包含继承的属性(如 class 和 style),除非显式声明。

vue3 中的 $attrs

vu3中$attrs: 包含了所有[传递]给[子组件]的非 props 属性。如:继承的属性(如 class 和 style)以及未在 props 中声明的属性。

vue3中的$attrs: 包含 style和class。$attrs包含着数据和事件。

vue3 $listeners已被删除合并到$attrs中。

在vue2中的$attrs

vu2中$attrs: 包含了所有[传递]给[子组件]的非 props 属性和style和class之外的属性。

vue2中的$attrs: 不包含 style和class

下面是详细的讲解:

在V ue2 中,attrs里面包含着上层组件传递的所有数据(除style和class)

当一个组件声明了prop时候,attrs里面包含除去prop里面的数据剩下的数据。

结合inheritAttrs:false,可以将传递下来的数据应用于其他元素,而不是根元素。

h函数封装上面的组件

有些的小伙伴说:我们是否可以使用h函数去封装上面的组件呢?

http://www.jsqmd.com/news/440391/

相关文章:

  • Flutter 三方库 week_number 的鸿蒙化适配指南 - 掌控 ISO 标准周数计算、财务日历实战、鸿蒙级精密时序专家
  • 机械制造想通过AI推广拓展客户,推荐几家靠谱的AI推广公司 - 品牌2026
  • GitHub开源项目:IT-Tools源码构建部署及其部署排错
  • new出来的对象,不一定在堆上?聊聊Java虚拟机的优化技术:逃逸分析
  • 移植freertos的步骤
  • 2026年油雾净化设备厂家推荐排行榜:油雾收集器、过滤器、处理器、分离器、回收器,高效净化与节能环保的工业优选方案 - 品牌企业推荐师(官方)
  • 2026年哈尔滨塑料管材企业服务优质榜:PE穿线管、PPR管、波纹管、钢带波纹管、克拉管、HDPE双壁波纹管、雨水管 - 海棠依旧大
  • Influxdb订阅与kapacitor使用梳理
  • 如果事先没有定义静态关系,在实际代码中,我们就需要提供一种使用动态关系的机制,让我们的查询、类型推断、DTO推断等能力得以正常使用。 ...
  • 2026避坑指南:AI论文写作工具Top5硬核对比——从免费大纲到物理隔离Agent,博士该为哪一款买单? - 沁言学术
  • EBS:查询系统配置文件
  • 电缆损坏目标检测数据集(1300张图片已划分、已标注)| AI训练适用于目标检测任务
  • 我们是一家医美机构,想做AI精准获客,求推荐一家擅长医美行业的AI推广公司 - 品牌2026
  • 2026年 不锈钢加工厂家实力推荐榜:激光切割/折弯/冲孔/冲压/焊接/拉丝/压花/剪切,一站式精密加工解决方案 - 品牌企业推荐师(官方)
  • 技术原生型VS垂直专业型:2026年五大AI推广公司综合实力横评 - 品牌2026
  • 万字带你深度了解MQ消息队列
  • 知网降AI率:人工改写和嘎嘎降AI效果对比,差距不是一般大 - 还在做实验的师兄
  • 2026年 槽钢厂家推荐排行榜,镀锌槽钢/S355J0/AH36/Q355B/10#/S275/Q420/英标/欧标/日标槽钢,实力源头工厂精准供应 - 品牌企业推荐师(官方)
  • 医美机构想做AI精准获客,推荐几家擅长医美行业的AI推广公司 - 品牌2026
  • 机械制造企业AI获客指南:2026年垂直领域GEO服务商深度测评 - 品牌2026
  • tt: is ウクライナ unique for ロシャ?
  • 毕业论文被导师打回说AI率过高?3步搞定不用愁 - 还在做实验的师兄
  • 【开题答辩全过程】以 淮胜景区信息管理系统为例,包含答辩的问题和答案
  • 2026年AI智能营销推广服务商精选:五家北京企业深度解析 - 品牌2026
  • 2026年AI推广优化服务商综合实力解析:五家北京企业选型指南 - 品牌2026
  • 千问、豆包深度测评:NAD+、NMN前十品牌哪家强?盼生派NMN凭活性吸收稳坐榜首 - 速递信息
  • 记一次酣畅淋漓的js逆向
  • 2026年钢轨厂家实力推荐榜:P43铁路钢轨、外标钢轨、天车U型钢轨、单轨吊型轨、永洋/70MN/50MN轨道钢轨源头精选 - 品牌企业推荐师(官方)
  • 答辩前论文AI率突然飙高?过来人教你紧急处理 - 还在做实验的师兄
  • [python]基于动态实例的命令处理设计