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

Vue中如何更好地封装组件?

  • 子组件接受父组件传递的事件

1.子组件使用@事件名="$emit('父组件中传递的事件名',想给父组件传递的参数(可选))"
@click="$emit('click')"
2.子组件使用
v-on="$listeners"

 父组件:

<template><div id="app"><myComponents :msg="form.msg" @click="a"/></div>
</template><script>
import myComponents from "./components/myComponents";export default {name: 'App',components: {myComponents},data(){return {form:{msg: "10"}}},methods:{a(){console.log('哈哈哈')},}
}
</script><style></style>

 子组件:

<template><div><!-- 子组件接收父组件传来的参数--><h1 v-on="$listeners" @click="$emit('click')">{{ msg }}</h1></div>
</template><script>
export default {name: 'my-Components',props: {msg: {type: String,default: "18"}},created() {console.log(this.$listeners)  //一个对象,里面包含父组件传递过来的所有事件},methods: {}
}
</script>
<style scoped>
</style>
  • 父组件传值给子组件

1.子组件使用props声明想要的属性,再将该属性动态绑定给子组件
props: {msg: {type: String,default: "18"},
},
     然后子组件中绑定数据即可
    父组件使用prop声明,就可以传递给子组件

:prop="msg"

2.子组件使用$attrs,这个组件包含了被传入,但没有声明的prop

 子组件:

<template><div><!-- 子组件接收父组件传来的参数--><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'my-Components',
//不声明msg// props: {//   msg: {//     type: String,//     default: "18"//   },// },created() {console.log(this.$attrs)   //一个对象,包含父组件中被传入,但没有声明的prop},methods: {}
}
</script><style scoped>
</style>

打印结果: 

 此时h1标签上就有msg属性:

<template><div><!-- 子组件接收父组件传来的参数--><h1 v-bind="$attrs"> {{this.$attrs.msg}}</h1></div>
</template>

页面显示结果:

 

 需要注意的一点是:Vue会将被传入,但未声明的prop作为html属性,绑定到组件的根元素上:

可以设置属性 inheritattrs为false,将这些默认行为去掉,来解决这个问题。

<template><div><!-- 子组件接收父组件传来的参数--><h1 v-bind="$attrs"> {{this.$attrs.msg}}</h1></div>
</template><script>
export default {name: 'my-Components',inheritAttrs:false,
}
</script><style scoped>
</style>

  • 对外暴露子组件插槽

1.直接向子组件转发插槽,使用父组件的 $slots 
该组件包含了传递给父组件的非作用域插槽
使用$scopeSlots可传递给父组件的作用域插槽,这个组件包含了组件接受的所有插槽

子组件:

<template>
<el-input
v-model="innerVal"
v-bind-"$attrs
@input="$emit('input", $event)"v-on-"$listeners//子组件中写两个插槽
<template #append>
<slot name="append"></slot></template>
<template #prepend>
<slot name="prepend"></slot></template>
</el-input>
</template>

 打印this.$slots

  • props validator

一般我们会用对象的形式声明prop,可以在对象中指定prop的默认值,也可以指定类型,对prop进行验证。
一个更灵活的的方式是,传入并编写一个验证函数,prop会作为参数传入该函数,函数返回fals时,会抛出控制台警告,这种方式特别适合验证枚举值,

 子组件:

<template><div><!-- 子组件接收父组件传来的参数--><h1 v-on="$listeners" @click="$emit('click')" v-bind="$attrs"> {{this.$attrs.msg}}</h1></div>
</template><script>
export default {name: 'my-Components',inheritAttrs:false,props:{numberIs:{default: '1',//当传入的prop值不是1,2,3时,控制台会抛出警告validator: prop => ['1', '2', '3'].includes(prop)}},
}
</script>
<style scoped>
</style>

 父组件:

<template><div id="app"><!--  传入numberIs的值为4  --><myComponents :msg="form.msg" @click="a" numberIs="4"/></div>
</template><script>
import myComponents from "./components/myComponents";export default {name: 'App',components: {myComponents},data() {return {form: {msg: "10"},}},methods: {a() {console.log('哈哈哈')},}
}
</script><style></style>

$refs用于父组件获取整个子组件,然后可以使用子组件的方法和属性(暴露子组件方法)

父组件:

<template><div id="app"><!--  ref相当于给当前子组件设置了一个id,可以使用refs根据ref的值获取该组件  --><myComponents :msg="form.msg" @click="a" numberIs="1" ref="bb"/></div>
</template><script>
import myComponents from "./components/myComponents";export default {name: 'App',components: {myComponents},data() {return {form: {msg: "10"},}},methods: {a() {//获取ref值为bb的子组件,并调用该子组件上的show方法this.$refs.bb.show()},}
}
</script><style></style>

子组件:

<template><div><!-- 子组件接收父组件传来的参数--><h1 v-on="$listeners"  v-bind="$attrs"> {{this.$attrs.msg}}</h1></div>
</template><script>
export default {name: 'my-Components',inheritAttrs:false,props:{numberIs:{default: '1',//当传入的prop值不是1,2,3时,控制台会抛出警告validator: prop => ['1', '2', '3'].includes(prop)}},created() {},methods: {show(){console.log('1111')}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

打印 this.$refs 显示为:

 

 点击之后,控制台输出:

总结:

1. $attrs 简化多层组件之间props传值;
2. $listeners 简化多层组件之间事件传递;
3. $Slots 更多拓展自定义组件传值,包括自定义html元素,及对象;
4. props validator 增强组件传值稳健性,可自定义业务代码效验参数;
5. $refs 对外提供API 增强组件灵活度和可控性; 

相关文章:

Vue中如何更好地封装组件?

子组件接受父组件传递的事件 1.子组件使用事件名"$emit(父组件中传递的事件名,想给父组件传递的参数(可选))" click"$emit(click)" 2.子组件使用 v-on"$listeners" 父组件&#xff1a; <template><div id"app"><myCo…...

C语言的链表的相关操作

本变博客源于自己想复习一下C语言&#xff0c;所以便自己动手复习了一下链表的相关操作。做个人记录使用。 main.c #include <stdio.h> #include "list.h"int main() {student *a;printf("hello world\n") ;printf("----初始化列表----------\…...

Python3中typing模块

Python类型注解是Python 3.5版本之后引入的新特性&#xff0c;它可以让开发者在函数、变量等声明时为其指定类型。typing模型能够声明类型&#xff0c;防止运行时出现参数和返回值类型不符合的问题。 ### 1. 基本类型注解 def hello(name: str) -> str:return (Hello, na…...

C语言自动抓取淘宝商品详情网页数据,实现轻松高效爬虫

你是否曾经遇到过需要大量获取网页上的数据&#xff0c;但手动复制粘贴又太过费时费力&#xff1f;那么这篇文章就是为你而写。今天我们将会详细讨论如何使用C语言实现自动抓取网页上的数据。本文将会从以下8个方面进行逐步分析讨论。 1. HTTP协议的基本原理 在开始之前&…...

数据结构---跳表

目录标题 为什么会有跳表跳表的原理跳表的模拟实现准备工作find函数insert函数erase函数 测试效率比较 为什么会有跳表 在前面的学习过程中我们学习过链表这个容器&#xff0c;这个容器在头部和尾部插入数据的时间复杂度为O(1)&#xff0c;但是该容器存在一个缺陷就是不管数据…...

为什么Tomcat的NIO在读取body时要模拟阻塞?

文章首发地址 Tomcat的NIO完全可以以非阻塞方式处理IO&#xff0c;为什么在读取body部分时要模拟阻塞呢&#xff1f;在Tomcat的NIO读取HTTP请求时&#xff0c;为了保证请求的正确性和可靠性&#xff0c;需要模拟阻塞模式&#xff0c;这是因为servlet规范里定义了ServletInputSt…...

26 | 谷歌应用APP数据分析

基于kaggle公开数据集,对谷歌应用市场的APP情况进行数据探索和分析。 from kaggle: https://www.kaggle.com/lava18/google-play-store-apps 分析思路: 0、数据准备 1、数据概览 2、种类对Rating的影响 3、定价策略 4、因素相关性分析 5、用户评价 6、总结 0、数据准备 (…...

BFS 五香豆腐

题目描述 经过谢老师n次的教导&#xff0c;dfc终于觉悟了——过于腐败是不对的。但是dfc自身却无法改变自己&#xff0c;于是他找到了你&#xff0c;请求你的帮助。 dfc的内心可以看成是5*5个分区组成&#xff0c;每个分区都可以决定的的去向&#xff0c;0表示继续爱好腐败&…...

opencv实战项目 手势识别-手势控制键盘

手势识别是一种人机交互技术&#xff0c;通过识别人的手势动作&#xff0c;从而实现对计算机、智能手机、智能电视等设备的操作和控制。 1. opencv实现手部追踪&#xff08;定位手部关键点&#xff09; 2.opencv实战项目 实现手势跟踪并返回位置信息&#xff08;封装调用&am…...

1.作用域

1.1局部作用域 局部作用域分为函数作用域和块作用域。 1.函数作用域: 在函数内部声明的变量只能在函数内部被访问&#xff0c;外部无法直接访问。 总结&#xff1a; (1)函数内部声明的变量&#xff0c;在函数外部无法被访问 (2)函数的参数也是函数内部的局部变量 (3)不同函数…...

黑马B站八股文学习笔记

视频地址&#xff1a;https://www.yuque.com/linxun-bpyj0/linxun/vy91es9lyg7kbfnr 大纲 基础篇 基础篇要点&#xff1a;算法、数据结构、基础设计模式 1. 二分查找 要求 能够用自己语言描述二分查找算法能够手写二分查找代码能够解答一些变化后的考法 算法描述 前提&a…...

前端常用的上传下载文件的几种方式,直接上传、下载文件,读取.xlsx文件数据,导出.xlsx数据

一、通过调用接口下载文件 const onExport async () > {try {let res await axios.request({method: POST,url: 请求地址,responseType: blob,params: { data: null },headers: { Authorization: Bearer UserModule.token },//看看请求是否需要token});let reader new…...

FPGA应用学习笔记--时钟域的控制 亚稳态的解决

时钟域就是同一个时钟的区域&#xff0c;体现在laways语句边缘触发语句中&#xff0c;设计规模增大就会导致时钟不同步&#xff0c;有时差&#xff0c;就要设计多时钟域。 会经过与门的延时产生的新时钟域&#xff0c;这种其实不推荐使用&#xff0c;但在ascl里面很常见 在处理…...

AirServer是什么软件,手机屏幕投屏电脑神器

什么是 AirServer&#xff1f; AirServer 是适用于 Mac 和 PC 的先进的屏幕镜像接收器。 它允许您接收 AirPlay 和 Google Cast 流&#xff0c;类似于 Apple TV 或 Chromecast 设备。AirServer 可以将一个简单的大屏幕或投影仪变成一个通用的屏幕镜像接收器 &#xff0c;是一款…...

如何使用 AT+WEBSERVER 指令实现自定义的 Webserver html 网页配网

开启 AT 固件中的 Webserver 指令和 FS 指令支持 乐鑫官网发布的默认通用 AT 固件不支持 webserver 配网功能&#xff0c; 需要用户自己搭建 esp-at 环境&#xff0c;并在 sdkconfig 中开启 webserver AT 指令 和 FS 指令的支持&#xff0c; 如下图所示&#xff1a; 测试 AT 固…...

期权定价模型系列【4】—期权组合的Delta-Gamma-Vega中性

期权组合的Delta-Gamma-Vega中性 期权组合构建时往往会进行delta中性对冲&#xff0c;在进行中性对冲后&#xff0c;期权组合的delta敞口为0&#xff0c;此时期权组合仍然存在gamma与vega敞口。因此研究期权组合的delta-gamma-vega敞口中性是有必要的。 本文旨在对delta-gamma-…...

k8sday02

第四章 实战入门 本章节将介绍如何在kubernetes集群中部署一个nginx服务&#xff0c;并且能够对其进行访问。 Namespace ​ Namespace是kubernetes系统中的一种非常重要资源&#xff0c;它的主要作用是用来实现多套环境的资源隔离或者多租户的资源隔离。 ​ 默认情况下&…...

黑马头条项目学习--Day2: app端文章查看,静态化freemarker,分布式文件系统minIO

app端文章 Day02: app端文章查看&#xff0c;静态化freemarker,分布式文件系统minIOa. app端文章列表查询1) 需求分析2) 实现思路 b. app端文章详细1) 需求分析2) Freemarker概述a) 基础语法种类b) 集合指令&#xff08;List和Map&#xff09;c) if指令d) 运算符e) 空值处理f) …...

特语云用Linux和MCSM面板搭建 我的世界基岩版插件服 教程

Linux系统 用MCSM和DockerWine 搭建 我的世界 LiteLoaderBDS 服务器 Minecraft Bedrock Edition 也就是我的世界基岩版&#xff0c;这是 Minecraft 的另一个版本。Minecraft 基岩版可以运行在 Win10、Android、iOS、XBox、switch。基岩版不能使用 Java 版的服务器&#xff0c;…...

2023.8

编译 make install 去掉 folly armv8-acrc arrow NEON 相关链接 https://blog.csdn.net/u011889952/article/details/118762819 这里面的方案二&#xff0c;我之前也是用的这个 https://blog.csdn.net/zzhongcy/article/details/105512565 参考的此博客 火焰图 https://b…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤:1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现:客户端实现:4. Axi…...