【Vue】组件封装小技巧 — 利用$attrs和v-bind接收传递未定义的属性

使用介绍

在Vue.js中,$attrsv-bind可以用于组件的二次封装,以在封装的组件中传递父组件的属性和事件。这对于创建高度可定制的通用组件非常有用。

下面是一些示例代码:

假设你有一个名为MyButton的自定义按钮组件,它接受一些常见的按钮属性(如disabledtype等),然后你想将其二次封装,以添加一些额外的样式和功能。以下是如何使用$attrs和v-bind来实现这个目标的示例:

<template>
  <button
    class="my-custom-button"  <!-- 添加自定义样式 -->
    v-bind="$attrs"  <!-- 将父组件传递的属性绑定到这个按钮 -->
    :class="{ 'my-special-class': special }"  <!-- 添加额外的类名 -->
    @click="handleClick"  <!-- 添加点击事件处理函数 -->
  >
    <slot></slot>  <!-- 保留插槽内容 -->
  </button>
</template>

<script>
export default {
  props: {
    special: Boolean,
  },
  methods: {
    handleClick() {
      // 处理点击事件
      this.$emit('click');
    },
  },
};
</script>

在这个示例中,MyButton组件接受一个名为special的属性,这个属性用于指定是否要添加额外的特殊样式。$attrs用于将所有未明确声明的父组件传递的属性绑定到按钮元素上。然后,我们使用:class来添加额外的类名,使用@click来添加点击事件处理函数,同时保留插槽内容以确保父组件可以插入任何需要的内容。

在父组件中,你可以像使用普通按钮一样使用MyButton组件,并将需要的属性和事件传递给它:

<template>
  <div>
    <MyButton
      disabled="true"
      type="submit"
      special="true"
      @click="handleSpecialClick"
    >
      Click me
    </MyButton>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton,
  },
  methods: {
    handleSpecialClick() {
      // 处理特殊按钮的点击事件
    },
  },
};
</script>

通过这种方式,你可以将MyButton组件进行二次封装,以添加额外的功能和样式,同时仍然能够从父组件传递属性和事件。这种方法可以创建更加灵活和可定制的组件,适应不同的需求。

需要注意!!!

如果不设置 inheritAttrs: false,则属性如下所示
在这里插入图片描述
而设置 inheritAttrs: false可以来避免这种行为,这样后将不继承未明确声明的属性。clearable属性也就不见了。
在这里插入图片描述

使用案例

组件二次封装,修改 elementUI 的样式:

<template>
  <el-date-picker v-model="innerVal" v-bind="$attrs"></el-date-picker>
</template>
<script>
export default {
  name: 'myDatePicker',
  components: {},
  props: {},
  inheritAttrs: false,  // 不继承未明确声明的属性
  data () {
    return {
      innerVal: this.$attrs.value //这里获取 v-model 内容
    }
  },
  methods: {},
  created () { },
  mounted () { }
}
</script>
<style lang="less" scoped>
/deep/.el-input__inner {
  background: #071e52;
  border: 2px solid #36a6f1;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  height: inherit;
}
/deep/.el-input__icon {
  line-height: 27px;
}
</style>

具体使用:

<!-- 这里的selectDate也就是组件中所写的 this.value -->
<my-date-picker v-model="selectDate" type="date" placeholder="选择日期"
                          style="margin-left: 15px;height: 27px;" :clearable="false">
</my-date-picker>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

14.序列化和文件的输入/输出 保存对象

14.1 保存对象状态 你已经奏出完美的乐章&#xff0c;现在会想把它储存起来。你可以抓个文房四宝把它记下来&#xff0c;但也可以按下储存按钮(或按下File菜单上的Save)。然后你帮文件命名&#xff0c;并希望这个文件不会让屏幕变成蓝色的画面。 储存状态的选择有很多种&…

域名解析DNS:如何查询txt类型的解析记录

前言 略 查询txt类型的解析记录 使用 nslookup 命令查询。 示例&#xff1a; cmd> nslookup -qttxt _acme-challenge.mydomain.com 服务器: UnKnown Address: fe80::1非权威应答: _acme-challenge.mydomain.com text "_unitrust-dcv2311071423492fmnwb1w…

07 # 手写 find 方法

find 的使用 find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。 ele&#xff1a;表示数组中的每一个元素index&#xff1a;表示数据中元素的索引array&#xff1a;表示数组 <script>var arr [1, 3, 5, 7, 9];var result arr.find(fun…

第七讲:利用类事件改变对象的属性(上)

《VBA中类的解读及应用》教程【10165646】是我推出的第五套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。 类&#xff0c;是非常抽象的&#xff0c;更具研究的价值。随着我们学习、应用VBA的深入&#xff0…

矿泉水除溴酸盐、矿泉水除溴化物的技术

我们常饮用的各品牌的矿泉水&#xff0c;实际在生产过程当中也涉及到了相当复杂的处理工艺的&#xff0c;今天为大家分享的是关于矿泉水中溴酸盐、溴化物的知识点&#xff0c;以及矿泉水中为什么要除溴酸盐&#xff1f;原理是什么&#xff0c;那么又是什么样的技术能真正从根本…

基于情感分析+聚类分析+LDA主题分析对服装产品类的消费者评论分析(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

华为防火墙基本原理工作方法总结

防火墙只会对tcp首包syn建立会话表&#xff0c;其它丢掉&#xff0c;如synack&#xff0c;ack udp直接建立会话表 icmp只对首包请求包建立会话表&#xff0c;其它包&#xff0c;如应答的不会建立直接丢掉 防火墙状态查看&#xff1a; rule name trust_untrust source-zone tru…

Qlik Sense : Fetching data with Qlik Web Connectors

目录 Connecting to data sources Opening a connector Connecting to a data source Authenticating the connector Defining table parameters Using standard mode or legacy mode Standard mode Connector overview Using multi-line input parameters to fetch da…

解析虚拟文件系统的调用

Linux 可以支持多达数十种不同的文件系统。它们的实现各不相同&#xff0c;因此 Linux 内核向用户空间提供了虚拟文件系统这个统一的接口&#xff0c;来对文件系统进行操作。它提供了常见的文件系统对象模型&#xff0c;例如 inode、directory entry、mount 等&#xff0c;以及…

【Linux】 reboot 命令使用

reboot 命令用于用来重新启动计算机。 语法 reboot [参数] 命令选项及作用 执行令 man --reboot 执行命令结果 参数 -n : 在重开机前不做将记忆体资料写回硬盘的动作-w : 并不会真的重开机&#xff0c;只是把记录写到 /var/log/wtmp 档案里-d : 不把记录写到 /var/log…

全志A40i应用笔记 | 3种常见的网卡软件问题以及排查思路

在飞凌嵌入式OKA40i-C开发板上虽然只有一个网口&#xff0c;但全志A40i-H处理器本身是有两个网络控制器的&#xff0c;因此在飞凌嵌入式提供的产品资料中提供了双网口解决方案。有的工程师小伙伴在开发过程中会遇见一些网卡的设计问题&#xff0c;今天小编为大家分享3种在使用O…

基于Java+SpringBoot+Mybaties-plus+Vue+ElementUI 失物招领小程序 设计与实现

一.项目介绍 失物招领小程序 用户登录、忘记密码、退出系统 发布失物 和 发布招领 查看我发布的失物和招领信息 失捡物品模块可以查看和搜索所有用户发布的信息。 二.环境需要 1.运行环境&#xff1a;java jdk1.8 2.ide环境&#xff1a;IDEA、Eclipse、Myeclipse都可以&#…

【紫光同创国产FPGA教程】【PGC1/2KG第七章】7.数字钟实验例程

本原创教程由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处 适用于板卡型号&#xff1a; 紫光同创PGC1/2KG开发平台&#xff08;盘古1K/2K&#xff09; 一&#xff1a;盘古1K/2K开发板&#xff08;紫光同创PGC…

k8s configMap挂载(项目配置文件放到configMap中,不同环境不同配置)

背景说明 项目对接配置文件加密&#xff0c;比如数据库密码、redis密码等。但是密文只能放到指定的配置文件中(important.properties)&#xff0c;该配置文件又不能接收环境变量&#xff0c;所以就很难区分不同环境的不同配置&#xff08;不同环境的数据库密码、redis密码一般…

ECA-Net(Efficient Channel Attention Network)

ECA-Net&#xff08;Efficient Channel Attention Network&#xff09;是一种用于计算机视觉任务的注意力模型&#xff0c;旨在增强神经网络对图像特征的建模能力。本文详细介绍ECA-Net注意力模型的结构设计&#xff0c;包括其背景、动机、组成部分以及工作原理。ECA-Net模块的…

LoRaWAN物联网架构

与其他网关一样&#xff0c;LoRaWAN网关也需要在规定的工作频率上工作。在特定国家部署网关时&#xff0c;必须要遵循LoRa联盟的区域参数。不过&#xff0c;它是没有通用频率的&#xff0c;每个国家对使用非授权MHZ频段都有不同的法律规定。例如&#xff0c;中国的LoRaWAN频段是…

react-native 0.63 适配 Xcode 15 iOS 17.0+

iOS 17.0 Simulator(21A328)下载失败 App Store 更新到 Xcode15 后&#xff0c;无法运行模拟器和真机。需要下载iOS 17对应的模拟器。Xcode中更新非常容易中断失败&#xff0c;可以在官网单独下载iOS 17模拟器文件&#xff0c;例如&#xff1a;iOS_17.0.1_Simulator_Runtime.d…

开放智慧,助力学习——电大搜题,打开学无止境的新篇章

随着信息技术的迅猛发展&#xff0c;学习已经不再受时间和空间的限制。电大搜题微信公众号为广播电视大学和河南开放大学的学子们带来了便利和智慧&#xff0c;让学习变得更加高效和愉快。 电大搜题微信公众号作为一款专为电大学生而设计的学习助手&#xff0c;是学习中不可或…

红队专题-从零开始VC++C/S远程控制软件RAT-MFC-远程控制软件总结

红队专题 招募六边形战士队员[30]远控班第一期课程与远控总结 招募六边形战士队员 一起学习 代码审计、安全开发、web攻防、逆向等。。。 私信联系 [30]远控班第一期课程与远控总结 一.Bug修复(1)生成路径(2)显示系统版本号二.内存泄露(1)如何检查内存泄露 #define CRTDBG_…