Vue-组件二次封装

本次对el-input进行简单封装进行演示

  • 封装很简单,就给激活样式的边框(主要是功能)

本次封装主要使用到vue自带的几个对象

  • $attrs:获取绑定在组件上的所有属性
  • $listeners: 获取绑定在组件上的所有函数方法
  • $slots: 获取应用在组件内的所有插槽

1、属性传递

element 的input组件有很多属性,

  • 想要实现在封装好后的组件上使用el-input组件的属性,会直接传递到el-input组件上,包括v-model
  • 在组件中,可以使用this.$attrs获取所有绑定在组件上的属性(不包括方法)
  • 这样,我们就可以在封装的组件内,使用v-bind="$attrs",直接把属性传递到内部组件上。
  • 在下列案例中,由于v-model:value 和 @input两个组合的语法糖,$attrs只能获取属性,所以只能传递:value属性

1.1、父组件

<template><div class="wrapper"> <my-input v-model="val"></my-input></div>
</template><script>import MyInput from '@/components/MyInput'export default {components: {MyInput,},data() {return {val: '111',}},methods: {inputChange(val){console.log(val);}}}
</script><style lang="scss" scoped>.wrapper {padding: 10vh;}
</style>

1.2、子组件

<template><el-input v-bind="$attrs"></el-input>
</template>
<script>export default {created() {console.log("attrs:",this.$attrs);}}
</script>
<style lang="scss" scoped>
::v-deep {.el-input__inner:focus {border-color: red;
}
}</style>

1.3、效果

  • 这时候给输入框输入值是无效的,因为目前只能把value属性绑定到el-input上,并没有把input函数绑定上去,所以不能修改父组件传过来的value的值。

在这里插入图片描述

2、方法传递

element的组件,也有很多方法,比如:change等函数

  • 想要实现在封装好后的组件上使用el-input组件的方法,会直接传递到el-input组件上。
  • 在组件中,可以使用this.$listeners获取所有绑定在组件上的属性(不包括属性)
  • 这样,我们就可以在封装的组件内,使用v-on="$listeners",直接把方法传递到内部组件上。
  • 在下列案例中,由于v-model:value 和 @input两个组合的语法糖,$listeners只能获取属性,所以结合上面$attrsjiu可以完整的实现v-model的效果了

2.1、父组件

<template><div class="wrapper"> <my-input v-model="val" @change="inputChange"></my-input></div>
</template><script>import MyInput from '@/components/MyInput'export default {components: {MyInput,},data() {return {val: '111',}},methods: {inputChange(val){console.log("inputChange:", val);}}}
</script>

2.2、子组件

<template><el-input v-bind="$attrs" v-on="$listeners"></el-input>
</template>
<script>export default {created() {console.log("attrs:",this.$attrs);console.log("listeners:",this.$listeners);}}
</script>
<style lang="scss" scoped>
::v-deep {.el-input__inner:focus {border-color: red;}
}</style>

2.3、效果

这时候搭配$attrs就可以实现v-model的完整效果了,以及@change函数也会传递过去

在这里插入图片描述

3、插槽传递

element的组件,也包括了很多的插槽

  • 想要给封装好后的组件,使用的插槽,传递到el-input
  • 在组件中,可以使用this.$attrs获取所有绑定在组件上的插槽
  • 这样,我们就可以在封装的组件内,使用v-for="(val, key) in $slots",所有插槽,遍历放到组件中,当作组件的插槽
  • 注意插槽传参也要处理(我这里没处理)

3.1、父组件

<template><div class="wrapper"> <my-input v-model="val" @change="inputChange"><template slot="prepend">Http://</template><el-button slot="append" icon="el-icon-search"></el-button></my-input></div>
</template><script>import MyInput from '@/components/MyInput'export default {components: {MyInput,},data() {return {val: '111',}},methods: {inputChange(val){console.log("inputChange:", val);}}}
</script><style lang="scss" scoped>.wrapper {padding: 10vh;}
</style>

3.2、子组件

<template><el-input v-bind="$attrs" v-on="$listeners"><template v-for="(val, key) in $slots"><slot :name="key"></slot></template></el-input>
</template>
<script>export default {created() {console.log("attrs:",this.$attrs);console.log("listeners:",this.$listeners);console.log("slots",this.$slots);}}
</script>
<style lang="scss" scoped>
::v-deep {.el-input__inner:focus {border-color: red;}
}</style>

3.3、效果

在这里插入图片描述

4、ref伪传递(适用于vue3)

  • 为什么说伪传递呢,因为在vue中,根本就拿不到外层组件的ref属性,所以只能另换思路
  • 你要用ref,无非就是想调用组件里面的函数。那我封装的组件里面,可以把被封装的组件的函数,直接提取出来,当作我封装组件的函数即可实现
  • 适用于Vue3,vue2会卡死

4.1、父组件

<template><div class="wrapper"> <my-input ref="muInput" v-model="val" @change="inputChange"><template slot="prepend">Http://</template><el-button slot="append" icon="el-icon-search"></el-button></my-input></div>
</template><script>import MyInput from '@/components/MyInput'export default {components: {MyInput,},data() {return {val: '111',}},mounted() {this.$refs.muInput.focus()},methods: {inputChange(val){console.log("inputChange:", val);}}}
</script><style lang="scss" scoped>.wrapper {padding: 10vh;}
</style>

4.2、子组件

<template><el-input ref="input" v-bind="$attrs" v-on="$listeners"><template v-for="(val, key) in $slots" #[key]><slot :name="key"></slot></template></el-input>
</template>
<script>export default {mounted() {console.log("attrs:",this.$attrs);console.log("listeners:",this.$listeners);console.log("slots",this.$slots);for (const [key, value] of Object.entries(this.$refs.input)) {this[key] = value}}}
</script>
<style lang="scss" scoped>
::v-deep {.el-input__inner:focus {border-color: red;}
}</style>

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

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

相关文章

成功解决Android设备adb连接后显示device unauthorized

一、提出问题 在电脑通过USB连接新的Android设备&#xff0c;想要通过adb来进行一些操作时&#xff0c;却发现命令提示符上在输入下面命令后显示设备未授权的信息也就是"unauthorized" adb devices二、不可行的解决方案 有人提出的解决方案是打开Android设备的开发…

测试开发(一) 使用Vue开发chrome插件

目录 一、引言 二、功能说明 三、【配置】操作演示 四、【请求拦截】演示 不断访问博客&#x

检测前端是否可以ping通后端返回的ip地址

检测前端是否可以ping通后端返回的ip地址 前端检测是否可ping通ip地址&#xff08;PC端&#xff09;前端检测是否可ping通ip地址&#xff08;uniapp小程序端&#xff09; 前端检测是否可ping通ip地址&#xff08;PC端&#xff09; // 前端检测是否可ping通ip地址 ping…

2023年新手如何学剪辑视频 想学视频剪辑如何入门

随着短视频、vlog等媒体形式的兴起&#xff0c;视频剪辑已经成为了热门技能。甚至有人说&#xff0c;不会修图可以&#xff0c;但不能不会剪视频。实际上&#xff0c;随着各种智能软件的发展&#xff0c;视频剪辑已经变得越来越简单。接下来&#xff0c;一起来看看新手如何学剪…

【ChatGPT 指令大全】怎么使用ChatGPT来帮我们写作

在数字化时代&#xff0c;人工智能为我们的生活带来了无数便利和创新。在写作领域&#xff0c;ChatGPT作为一种智能助手&#xff0c;为我们提供了强大的帮助。不论是作文、文章&#xff0c;还是日常函电&#xff0c;ChatGPT都能成为我们的得力助手&#xff0c;快速提供准确的文…

MySQL — MVCC

文章目录 MVCCMVCC 实现原理隐藏字段undo logundo log的用途undo log类型 版本链ReadView MVCC InnoDB是一个多版本的存储引擎。它保留有关已更改行的旧版本的信息&#xff0c;以支持并发和回滚等事务性特性。这些信息存储在undo表空间中的数据结构称为回滚段。InnoDB使用回滚…

培训报名小程序报名功能完善

目录 1 修改数据源2 修改表单3 支付成功时修改状态4 创建报名成功页5 最终的效果总结 目前我们的报名功能已经搭建了一个基础版&#xff0c;后续需要展示用户已经报名的信息&#xff0c;需要添加一个状态来显示用户是否成功付费。 1 修改数据源 打开我们的报名数据源&#xff…

mysql大量数据导入记要

需求描述 在工作中经历过两个项目要对数据库中的数据做大量数据的导出&#xff0c;转换和导入的工作。对于不涉及数据格式转换的导出导入工作&#xff0c;一般都是数据的备份。这个工作一般都由DBA搞定。对于要进行格式转换的工作&#xff0c;一般还是要由程序员参与。除非DBA…

解决ubuntu22卡死问题

解决ubuntu22卡死问题 最近用ubuntu2204做odoo开发&#xff0c;经常卡死&#xff0c;不清楚是什么原因&#xff0c;后来无意中发现pycharm占了50%内存&#xff08;公司电脑&#xff0c;一共8G&#xff09;&#xff0c;然后看了一下交换分区&#xff0c;总共2G&#xff08;默认…

前端中常见的设计模式

1.单例模式 描述&#xff1a;保证一个类仅有实例&#xff0c;并提供一个可以全局访问他的点&#xff0c;它通常用于管理应用程序的全局状态或资源&#xff0c;例如一个唯一的状态管理器。 代码示例&#xff1a; class Singleton {constructor() {if (!Singleton.instance) {…

【基础类】—前端算法类

一、排序 1. 排序方法列表 2. 常见排序方法 快速排序选择排序希尔排序 二、堆栈、队列、链表 堆栈、队列、链表 三、递归 递归 四、波兰式和逆波兰式 理论源码

机器学习笔记之优化算法(十一)梯度下降法:凸函数VS强凸函数

机器学习笔记之优化算法——梯度下降法&#xff1a;凸函数VS强凸函数 引言凸函数&#xff1a;凸函数的定义与判定条件凸函数的一阶条件凸函数的梯度单调性凸函数的二阶条件 强凸函数强凸函数的定义强凸函数的判定条件强凸函数的一阶条件强凸函数的梯度单调性强突函数的二阶条件…

redis的主从复制,哨兵和cluster集群

目录 一、redis的高可用 1&#xff09;redis高可用的概念 2&#xff09;Redis的高可用技术 二、redis主从复制 1&#xff09;主从复制的作用 2&#xff09;主从复制流程 三、redis一主二从的部署 实验组件 实验步骤 环境准备 修改内核参数 安装 Redis 创建redis工…

前后端分离式项目架构流程复盘之宿舍管理系统

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;【&#x1f387;前端】先创建Vue-cli项目&#xff08;版本2.6.10&#xff0c;仅包含babel&#xff09;&#xff0c;请选择此项目并创建 【整理简化项目模板】【&#x1f380;创建路由】…

k8s 终止pod

cat test.yaml apiVersion: v1 #必选&#xff0c;版本号&#xff0c;例如v1 kind: Pod #必选&#xff0c;Pod metadata: #必选&#xff0c;元数据 name: string #必选&#xff0c;Pod名称 namespace: string #必选&#xff0c;Pod所属的命…

git clean 命令

git clean -n //显示要删除的文件&#xff0c;clean的演习&#xff0c;告诉哪些文件删除&#xff0c;只是一个提醒。 git clean -dn //显示要删除的文件和目录 git clean -f //删除未追踪的文件 git clean -dff //删除未追踪的目录 git clean -df //清除所有未跟踪文件&#xf…

缩略图更清晰了:imagecopysampled代替imagecopyresized

之前用 imagecopyresized() 生成缩略图,但是效果不是太理想,后来把 imagecopyresized() 换成 imagecopysampled() ,效果好太多了,图片变得更加清晰了。 通过对比图,很明显看出,imagecopysampled()生成的缩略图,清晰度高很多。 下面是imagecopysampled()生成缩略图的代…

Netty面试题1

计算机网络模型 OSI采用了分层的结构化技术&#xff0c;共分七层&#xff0c; 物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 。 Open System Interconnect 简称OSI&#xff0c;是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参…

互联网医院|线上医疗平台连接医者和患者的桥梁

近年来&#xff0c;随着互联网技术的飞速发展&#xff0c;互联网医院系统悄然崛起&#xff0c;引领着医疗行业的变革浪潮。这一系统以其出色的功能与服务&#xff0c;为广大患者带来了便捷、高效的医疗体验&#xff0c;将传统医疗模式推向了新的高度。 作为医疗界的新生力量&a…

c# 初始化列表,并给列表里面所有的元素进行初始化

Enumerable.Repeat 方法是用于生成一个包含指定元素重复若干次的序列。它接受两个参数&#xff0c;第一个参数是要重复的元素&#xff0c;第二个参数是重复次数。 下面是 Enumerable.Repeat 方法的用法和示例&#xff1a; using System; using System.Collections.Generic; u…