vue 高阶组件;高阶组件
vue 高阶组件;高阶组件
文章目录
- vue 高阶组件;高阶组件
- 1. 什么是高阶组件
- 2. 高阶组件的作用
- 3. 高阶组件的使用
- 例子1:创建一个简单的高阶组件
- 例子2:使用element-ui的高阶组件
1. 什么是高阶组件
高阶组件是一个函数,传给它一个组件,它返回一个新的组件。
2. 高阶组件的作用
高阶组件的作用是用于组件之间代码的复用,它不会修改原组件,只是通过包裹的方式来增强组件的功能。比如:表单验证、表单提交、表单重置、表单数据回显等等。
3. 高阶组件的使用
// 高阶组件
function withComponent (Component) {return {render (h) {return h(Component)}}
}
// 普通组件
const Component = {render (h) {return h('div', '我是普通组件')}
}
// 使用高阶组件包裹普通组件
const NewComponent = withComponent(Component)
例子1:创建一个简单的高阶组件
这里有一个例子,用于展示高阶组件的使用。你可以使用你擅长的框架来实现这个例子。比如:Vue、React、Angular等等。
这里以Vue为例。
让我们使用刚才的高阶组件来实现一个功能:点击按钮,弹出提示框。
<template><div><h1>高阶组件</h1><NewButton></NewButton></div>
</template>
<script>
import { h } from 'vue'
// 高阶组件
function withAlert(Component) {return {render() {return h(Component, {onClick: () => { alert('点击了按钮')}})}}
}
// 普通组件
const Button = {render() {return h('button','hello world');}
}
// 使用高阶组件包裹普通组件
const NewButton = withAlert(Button)
export default {components: {NewButton}
}
</script>
清注意,在vue2中,你可能需要使用:
on:{click:()=>{alert('点击了按钮')} }来代替:
onClick:()=>{alert('点击了按钮') }
例子2:使用element-ui的高阶组件
这里使用一个常用的UI框架element-ui来实现一个例子,让我们来看看element-ui是如何使用高阶组件的。
<template><div style="margin: 50px;"><h1>高阶组件</h1><NewButton></NewButton></div>
</template>
<script>
import { ElInput } from 'element-plus';
// 高阶组件
const NewButton = {components: {ElInput},data() {return {value: ''}},render() {return (<ElInput v-model={this.value} />)}
}
export default {components: {NewButton}
}
</script>
你可能已经注意到,这里我们没有使用h函数,而是使用了jsx语法。如果是初学者,你可能会感觉到有些困惑。你可以去多了解一下jsx语法,高阶组件的使用不仅仅局限于h函数。
相关文章:
vue 高阶组件;高阶组件
vue 高阶组件;高阶组件 文章目录 vue 高阶组件;高阶组件1. 什么是高阶组件2. 高阶组件的作用3. 高阶组件的使用 例子1:创建一个简单的高阶组件例子2:使用element-ui的高阶组件 1. 什么是高阶组件 高阶组件是一个函数,传给它一个组件…...
数据结构:树的基本概念(二叉树,定义性质,存储结构)
目录 1.树1.基本概念1.空树2.非空树 2.基本术语1.结点之间的关系描述2.结点、树的属性描述3.有序树、无序树4.森林 3.树的常考性质 2.二叉树1.基本概念2.特殊二叉树1.满二叉树2.完全二叉树3.二叉排序树4.平衡二叉树 3.常考性质4.二叉树的存储结构1.顺序存储2.链式存储 1.树 1.…...
【Qt之QStandardItemModel类】介绍
描述 QStandardItemModel类提供了一个通用的模型,用于存储自定义数据。QStandardItemModel可以用作Qt标准数据类型的存储库。它是 Model/View类 之一,是 Qt的model/view框架 的一部分。 QStandardItemModel提 供了一种基于项目的传统方法来处理模型。 Q…...
01-Spring中的工厂模式
工厂模式 工厂模式的三种形态: 工厂模式是解决对象创建问题的属于创建型设计模式,Spring框架底层使用了大量的工厂模式 第一种:简单工厂模式是工厂方法模式的一种特殊实现,简单工厂模式又叫静态工厂方法模式不属于23种设计模式之一第二种:工厂方法模式…...
Linux是什么,Linux系统介绍
很多小伙伴都不是那么了解和知道Linux,到底Linux是什么? 像大家用到的安卓手机,生活中用到的各种智能设备,比如路由器,光猫,智能家具等,很多都是在Linux操作系统上。 Linux是什么?Li…...
爬虫项目(11):使用多线程对36手机高清壁纸批量抓取
文章目录 书籍推荐目标网址单线程实现多线程实现爬取结果书籍推荐 如果你对Python网络爬虫感兴趣,强烈推荐你阅读《Python网络爬虫入门到实战》。这本书详细介绍了Python网络爬虫的基础知识和高级技巧,是每位爬虫开发者的必读之作。详细介绍见👉: 《Python网络爬虫入门到…...
JavaScript_动态表格_删除功能
1、动态表格_删除功能 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>动态表格_添加和删除功能</title><style>table{border: 1px solid;margin: auto;width: 100%;}td,th{text-align: …...
一步一步开发微信小程序(Django+Mysql)
前提:假设你已经安装好Anaconda,微信开发者工具,MySQL数据库,IDE等工具 工具下载地址: Anaconda:https://www.anaconda.com/download MySQL:https://dev.mysql.com/downloads/mysql/ 微信开…...
mysql 讲解(1)
文章目录 前言一、基本的命令行操作二、操作数据库语句2.1、创建数据库2.2、删除数据库2.3、使用数据库2.4 查看所有数据库 三、列的数据类型3.1 字符串3.2 数值3.3 时间日期3.4 空3.5 int 和 varchar问题总结: 四、字段属性4.1 UnSigned4.2 ZEROFILL4.3 Auto_InCre…...
k8s关于metadata、spec.containers、spec.volumes的属性介绍(yaml格式)
目录 一.metadata常用属性 二.spec.containers子属性介绍 explain pod.spec.containers给出的参考 1.command示例演示 2.env和envFrom示例演示 3.ports部分详解 4.resources部分详解 5.startupProbe格式演示 6.terminationMessagePath和terminationMessagePolicy格式演…...
腾讯域名优惠卷领取
腾讯域名到到期了,听说申请此计划,可获得优惠卷,看到网上5年域名只需要10元,姑且试试看。 我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?in…...
elastic-job 完结篇
一 elastic-job 1.1 案例场景分析 1.设置4个分片,10秒执行一次。 分片弹性扩容缩容机制测试: 测试1:测试窗口1不关闭,再次运行main方法查看控制台日志,注意修改application.properties中的 server.port…...
基于 Gin 的 HTTP 代理 demo
上次用 TCP 模拟了一个 HTTP 代理之后,感觉那样还是太简陋了,想着是不是可以用框架来做一个有点实际用处的东西。所以,就思索如何用 golang 的 Gin 框架来实现一个?嗯,对的你没有听错,是 gin 框架。你可能会…...
【ATTCK】MITRE Caldera - 测试数据泄露技巧
CALDERA是一个由python语言编写的红蓝对抗工具(攻击模拟工具)。它是MITRE公司发起的一个研究项目,该工具的攻击流程是建立在ATT&CK攻击行为模型和知识库之上的,能够较真实地APT攻击行为模式。 通过CALDERA工具,安全…...
【数据结构】树与二叉树(十二):二叉树的递归创建(算法CBT)
文章目录 5.2.1 二叉树二叉树性质引理5.1:二叉树中层数为i的结点至多有 2 i 2^i 2i个,其中 i ≥ 0 i \geq 0 i≥0。引理5.2:高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点,其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…...
Qt绘制网格和曲线
绘制网格: void Widget::drawGrid(QPainter &p, QRect &windRect) {QRect rect(windRect.left()m_margins.left(),windRect.top()m_margins.top(),windRect.width()-m_margins.left()-m_margins.right(),windRect.height()-m_margins.top()-m_margins.bo…...
2023-11-12
今日比较摆烂, 但是把自写管道的原理搞懂了, 主要是把 exp 完完全全看懂了, 还不错. 然后就没干啥了. 明日计划: 学校的作业. AFL 源码. 我真是服了我自己了, AFL 源码搁多久了, 操操操 然后把 seccomp 重新学习下...
[工业自动化-16]:西门子S7-15xxx编程 - 软件编程 - 西门子仿真软件PLCSIM
目录 前言: 一、PLCSIM仿真软件 1.1 PLCSIM仿真软件基础版(内嵌) 1.2 PLCSIM仿真软件与PLCSIM仿真软件高级版的区别? 1.3 PLCSIM使用 前言: PLC集成开发环境是运行在Host主机上,Host主机与PLC可以通过…...
运行npm install卡住不动的几种解决方案
在前端开发经常会遇到运行npm install 来安装工具包一直卡住不动,为此这里提供几种解决方案,供大家参考学习,不足之处还请指正。 第一种方案、首先检查npm代理,是否已经使用国内镜像 // 执行以下命令查看是否为国内镜像 npm con…...
[Android]_[初级]_[配置gradle的环境变量设置安装位置]
场景 在开发Android项目的时候, gradle是官方指定的构建工具。不同项目通过wrapper指定不同版本的gradle。随着项目越来越多,使用的gradle版本也增多,导致它以来的各种库也增加,系统盘空间不足,怎么解决? 说明 grad…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
