vue2 二次封装element 组件,继承组件原属性,事件,插槽 示例

测试页面代码

这里主要记录如何封装element的el-input

并且封装后具有el-input原本的属性 事件 插槽

下面为测试页面即组件调用

<script>
import CustomInput from '@/components/CustomInput.vue';export default {name: 'TestPage',components: { CustomInput },data() {return {testInput: 'Hello World'}},};
</script><template><div style='margin-left: 50px;width: 600px'><!--            测试代码--><CustomInput v-model='testInput' placeholder='Hello World'><template slot='append'><el-button>搜索</el-button></template></CustomInput></div>
</template><style scoped lang='scss'></style>

组件的封装代码

先看看实际效果和是否生效

在 Vue.js 中,v-bind="$attrs"v-on="$listeners"inheritAttrs: false 是与组件的属性 (props) 和事件监听器相关的选项,它们通常用于自定义组件中以确保父组件传递的所有属性和事件能够正确地应用到子组件上。以下是每个选项的详细解释:

v-bind="$attrs"

  • v-bind="$attrs" 是一个 Vue 指令,用于将父组件传递给子组件的非 prop 属性 (即普通 HTML 属性和自定义属性,但不包括 class 和 style) 绑定到子组件的根 DOM 元素上。
  • 使用 $attrs 变量可以获得父组件传递下来的所有属性 (除了通过 props 定义的属性之外),然后一次性绑定到内部元素上。

v-on="$listeners"

  • v-on="$listeners" 也是一个 Vue 指令,用于添加父组件在子组件上设置的所有事件监听器。
  • $listeners 对象包含了在子组件上侦听的所有事件 (这些事件还没有配置相应的方法或尚未作为 prop 被识别)。使用这个指令可以方便地将所有父组件绑定的事件监听器添加到子组件的根 DOM 元素上。

inheritAttrs: false

  • inheritAttrs: false 是一个组件选项,使得所有的非 prop 属性 (比如 classstyle 等) 不会默认绑定到组件的根 DOM 元素上。
  • 默认情况下,Vue 会将任何不被识别为 prop 的属性自动添加到组件的根元素上。当你不希望建立这种默认行为时(比如你希望手动确定哪些属性应该被添加到哪个元素上),可以设置 inheritAttrs: false

此处为了继承原组件的所有插槽

需要依次声明它们

<template><el-inputv-bind="$attrs"v-on="$listeners":value="inputValue"@input="updateValue"><!-- 默认插槽 --><slot></slot><!-- 具名插槽 --><slot name="prepend" slot="prepend"></slot><slot name="append" slot="append"></slot><slot name="prefix" slot="prefix"></slot><slot name="suffix" slot="suffix"></slot></el-input>
</template><script>
export default {name: 'CustomInput',// 使用 inheritAttrs: false 选项,避免 attribute 被自动应用到组件根元素上inheritAttrs: false,props: ['value'], // 如果需要处理 value 属性,需要显式声明computed: {inputValue: {get() {return this.value;},set(value) {this.$emit('update:value', value);}}},methods: {updateValue(value) {this.$emit('input', value); // 当输入时触发 input 事件,并将新值通过事件发送给父组件}}
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806697.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jvm中jdk常用的几个命令总结

1.jmap 此命令可以用来查询内存信息&#xff0c;实例个数及占用内存大小 1.1 查看堆内存概要信息&#xff08;内存分配统计&#xff09; jmap -histo[:live] <pid> .-histo&#xff1a;显示堆中对象的统计信息&#xff0c;包括每个类的实例数量、占用内存大小等 :live…

从入门到弃坑:一个后端开发到鸿蒙开发的简单尝试

【摘要】 笔者说&#xff1a;因为本人也从未接触 Android 开发&#xff0c;所以本文也是从小白入门的角度学习 HarmonyOS开发&#xff0c;文中大量的内容和观点其实都可以从官方文档查阅到。写这篇文章大概也是从中精简内容&#xff0c;记录学习 HarmonyOS 的过程。 鸿蒙操作系…

四大生成式模型的比较——GAN、VAE、归一化流和扩散模型

比较四大模型的本质 four modern deep generative models: generative adversarial networks, variational autoencoders, normalizing flows, and diffusion models 待写

基于SpringBoot的“酒店管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“酒店管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统结构图 系统首页界面图 用户注册界面图 个人…

政安晨:【深度学习神经网络基础】(六)—— 前馈神经网络

目录 简述 前馈神经网络结构 计算输出 初始化权重 径向基函数神经网络 径向基函数 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎…

.NET MAUI Android Emulator运行错误 APT2000 系统找不到指定的文件

前言 本地.NET MAUI项目使用Android Emulator&#xff08;安卓模拟器&#xff09;调试运行&#xff0c;提示异常&#xff1a;严重性 代码 说明 项目 文件 行 禁止显示状态 详细信息 错误 APT2000 系统找不到指定的文件。 错误原因 文件目录中不能…

无监督学习~clustering

什么是clustering&#xff1f; 聚类算法查看多个数据点&#xff0c;并自动找到彼此相关或相似的数据点。 K-means clustering 示例 循环&#xff1a;再次分配每个点到离它最近的质心&#xff0c;重新计算质心。 K-means algorithm 注意&#xff1a; k-means的初始化质心Mu有…

大话设计模式之单例模式

单例模式是一种创建型设计模式&#xff0c;它确保类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。 单例模式通常在以下情况下使用&#xff1a; 当一个类只能有一个实例&#xff0c;并且客户端需要访问该实例时。当该唯一实例需要被公开访问&#xff0c;以便在…

微服务-2 Eureka

Eureka 启动页面&#xff1a; 同理再注册完order-service后&#xff0c;刷新启动页面&#xff1a; userservice 启动多台服务&#xff1a; [ 代码 ]&#xff1a;orderService.java&#xff08;用 RestTemplate 调其他服务&#xff0c;用 userservice 代替 localhost:8081&…

CUDA10安装与卸载,CUDA10.2与MMSEG安装

安装CUDA10 1、因为要用到tensorflow1.15.5的GPU版本&#xff0c;所以想安装cuda10来进行加速&#xff0c;通过nvidia-smi检查本机上的CUDA版本 2、下载的cuda10版本&#xff0c;cuda_10.0.130_411.31_win10.exe 下载的cudnn版本&#xff0c;cudnn-10.0-windows10-x64-v7.6.4…

B站广告推广操作教程及费用?

哔哩哔哩&#xff08;B站&#xff09;作为国内极具影响力的年轻人文化社区&#xff0c;已成为众多品牌与企业触达目标受众、提升品牌影响力的重要阵地。然而&#xff0c;面对B站复杂的广告系统与精细化运营需求&#xff0c;许多广告主可能对如何高效开展B站广告推广感到困惑。云…

备战蓝桥杯---数学刷题3

话不多说&#xff0c;直接看题&#xff1a; 1. 我们可以得到大致一个思路&#xff0c;就是先枚举1-1e6的质数&#xff0c;然后看看有几个即可。 我们怎么知道个数呢&#xff1f; 首先我们知道1---n中有n/p的下取整个为p的倍数。 因此&#xff0c;p的个数至少是n/p的下取整个…

typescript中的type关键字和interface关键字区别

Type又叫类型别名&#xff08;type alias&#xff09;,作用是给一个类型起一个新名字&#xff0c;不仅支持interface定义的对象结构&#xff0c;还支持基本类型、联合类型、交叉类型、元组等任何你需要手写的类型。 type num number; // 基本类型 type stringOrNum string |…

信息系统项目管理师——第5章信息系统工程(三)

近几期的考情来看&#xff0c;本章选择题稳定考4分&#xff0c;考案例的可能性有&#xff0c;需要重点学习。本章节专业知识点特别多。但是&#xff0c;只考课本原话&#xff0c;大家一定要把本章至少通读一遍&#xff0c;还要多刷题&#xff0c;巩固重点知识。 3 系统集成 3…

初识C++之内联函数 auto关键字

初识C之内联函数 auto关键字 文章目录 初识C之内联函数 auto关键字一、 内联函数1.1 定义1.2 应用1.3 特性 二、auto关键字2.1 简介2.2 auto的详细使用2.3 范围for&#xff08;C&#xff09;2.4 注意事项 一、 内联函数 1.1 定义 以inline修饰的函数叫做内联函数&#xff0c;…

python 有哪些函数

Python内置的函数及其用法。为了方便记忆&#xff0c;已经有很多开发者将这些内置函数进行了如下分类&#xff1a; 数学运算(7个) 类型转换(24个) 序列操作(8个) 对象操作(7个) 反射操作(8个) 变量操作(2个) 交互操作(2个) 文件操作(1个) 编译执行(4个) 装饰器(3个) …

linux进阶篇:文件查找的利器——grep命令+管道操作详解

Linux文件查找的利器——grep命令管道操作详解 1 grep简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具&#xff0c;它能使用正则表达式搜索文本&#xff0c;并把匹配的行打印出来。 Uni…

Web 前端性能优化之六:构建优化

5、渲染优化 如果把浏览器呈现页面的整个过程一分为二&#xff0c;前面章节所讨论的诸如图像资源优化、加载优化&#xff0c;以及构建中如何压缩资源大小等&#xff0c;都可视为浏览器为呈现页面请求所需资源的部分&#xff1b;本章将主要关注浏览器获取到资源后&#xff0c;进…

【Linux】tcpdump P3 - 过滤和组织返回信息

文章目录 基于TCP标志的过滤器格式化 -X/-A额外的详细选项按协议(udp/tcp)过滤低详细输出 -q时间戳选项 本文继续展示帮助你过滤和组织tcpdump返回信息的功能。 基于TCP标志的过滤器 可以根据各种TCP标志来过滤TCP流量。这里是一个基于tcp-ack标志进行过滤的例子。 # tcpdump…

【汇编语言实战】求两组给定数组最大值

C语言描述该程序流程&#xff1a; #include <stdio.h> int main() {int arr1[]{11,33,23,542,12233,5443,267,456,234,453};int arr2[]{21,123,432,45,234,534,6517,678,879,1};int maxarr1[0];for(int i1;i<10;i){if(arr1[i]>max){maxarr1[i];}}printf("%d\…