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 待写

解析oracle的DDL语句生成高斯内表及表字段主键配置

oracle的DDL语句如下: CREATE TABLE TPPROD.CONFIG (NO VARCHAR2(50),CONFIGCODE VARCHAR2(400),CONFIGVALUE VARCHAR2(400),CONSTRAINT PK_GUENDORASSISTCONFIG PRIMARY KEY (NO,CONFIGCODE) ); CREATE UNIQUE INDEX PK_GUENDORASSISTCONFIG ON TPPROD.GUENDORASSISTCONFIG (…

GPT知识库浅析

一、引言 上篇文章《GPT简介及应用》介绍了GPT的应用场景&#xff0c;里面提到GPT bot的基本使用&#xff1a;基于GPT训练好的数据&#xff0c;回答用户的问题。 但在使用过程中&#xff0c;如果用户的问题里面出现最新的术语&#xff0c;就会出现这种提示&#xff1a; 截至我…

queryWrapper and和or嵌套查询

在使用MyBatis-Plus时&#xff0c;我们可以通过QueryWrapper来构建复杂的查询条件&#xff0c;其中可以使用and和or来嵌套条件。以下是一个使用and和or嵌套条件的例子&#xff1a; 1. and ( ... or ... or...) 格式 import com.baomidou.mybatisplus.core.conditions.query.Q…

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

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

SaaS在线客服系统

随着互联网技术的飞速发展&#xff0c;企业与客户之间的沟通方式也在不断地演进。在这个信息爆炸的时代&#xff0c;如何快速、高效地响应客户需求&#xff0c;提供卓越的客户服务&#xff0c;成为企业竞争力的重要体现。在线客服系统作为连接企业与客户的桥梁&#xff0c;扮演…

亚远景科技-ASPICE 4.0 二级通用实践GP2.1.1 识别目标和定义过程实施策略

ASPICE 4.0 二级通用实践 GP 2.1.1 识别目标并定义过程执行策略。 确定过程活动的范围&#xff0c;包括过程实施管理和工作产品的管理。 判定要实现的相应结果。 识别过程执行的目标和相关准则。 注1&#xff1a;预算目标和客户交付日期、测试覆盖率目标及交付时间都是过程…

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

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

System.currentTimeMillis()

1纳秒0.000001毫秒 1纳秒0.000000001秒 Java中System.nanoTime()返回的是纳秒&#xff0c;nanoTime返回的可能是任意时间&#xff0c;甚至可能是负数 Java中System.currentTimeMillis()返回的毫秒&#xff0c;这个毫秒其实就是自1970年1月1日时起的毫秒数 System.nanoTime()是…

.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…

Spring 面试题(十二)

1. 解释一下Spring 中的 Enable* 注解的原理? Spring中的Enable*注解原理主要涉及到Spring的IoC容器和条件化配置。这些注解通过特定的机制来启用或激活Spring框架中的某些功能或特性。 以下是Enable*注解原理的主要方面&#xff1a; Import机制&#xff1a; Enable*注解通常…

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 |…