组件二次封装,通过属性事件透传,插槽使用,组件实例方法的绑定,深入理解 Vue.js 组件扩展与插槽

本文主要是介绍组件二次封装,通过属性事件透传,插槽使用,组件实例方法的绑定,深入理解 Vue.js 组件扩展与插槽,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

透传,插槽,组件实例方法的绑定,深入理解 Vue.js 组件扩展与插槽

前言

        Vue.js 提供了强大的组件化系统,允许开发者构建可复用、可组合的UI组件。在实际项目中,直接使用第三方库提供的基础组件(如Element UI)往往不能完全满足定制化需求。这时,对这些基础组件进行二次封装,使其更加符合项目需求就显得尤为重要。

目标组件:hsk-input

        本示例的目标是创建一个名为HSK-Input的组件,它基于Element UIel-input,但增加了额外的功能和灵活性,比如自动绑定el-input的所有实例方法,并提供一个自定义方法customMethod

核心知识点

属性与事件的透传

        v-bind="$attrs" v-on="$listeners":这是Vue中用于透传所有未被组件自身声明使用的属性和事件的关键技巧。$attrs包含所有没有被作为props声明的属性,$listeners则包含了父组件传递给当前组件的所有事件监听器。这样,我们就可以无需明确列出所有可能的属性和事件,而让HSK-Input能够自由接受并传递任何来自父组件的额外配置或交互逻辑。

 <el-input v-bind="$attrs" v-on="$listeners" ref="inputRef"></el-input>

使用插槽(Slots)

        v-for="(_, slotName) in $slots" 和 v-slot:[slotName]:这部分代码展示了如何动态地遍历并渲染传递给组件的所有插槽内容。Vue的插槽机制允许我们在封装组件时保留高度的灵活性,即用户可以在封装后的组件内部插入任意内容或组件,这对于保持UI组件通用性可定制性至关重要。

<el-input v-bind="$attrs" v-on="$listeners" ref="inputRef"><template v-for="(_, slotName) in $slots" v-slot:[slotName] ><slot :name="slotName"></slot></template></el-input>

父组件使用

<hsk-inputv-model="inputValue"placeholder="请输入"ref="customInputRef"@focus="handleFocus"type="text"clearable><template v-slot:prepend><span>http://</span></template><template v-slot:suffix><i class="el-input__icon el-icon-date"></i></template><template v-slot:append><el-button @click="handleButtonClick">Submit</el-button></template></hsk-input>

其子组件中打印this.$slots,就会出现父组件传递过来的插槽,只需要遍历一下this.$slots即可使用。
在这里插入图片描述
使用效果:
组件二次封装,通过属性事件透传,插槽使用,组件实例方法的绑定,深入理解 Vue.js 组件扩展与插槽

组件实例方法的绑定

        mounted() 钩子中的方法绑定:通过遍历el-input实例的方法并绑定到HSK-Input组件上,我们确保了所有原生输入框的功能都能在封装组件中直接调用。这种方法利用了JavaScriptbind()函数来改变函数执行时的上下文(this),使得在封装组件外部也能访问和控制基础组件的内部方法。

子组件添加ref,然后进行实例方法的绑定

<el-input v-bind="$attrs" v-on="$listeners" ref="inputRef"><template v-for="(_, slotName) in $slots" v-slot:[slotName]><slot :name="slotName"></slot></template></el-input>

打印this.$refs.inputRef,可以看出一些el-input自带的属性方法都在$refs.inputRef
组件二次封装,通过属性事件透传,插槽使用,组件实例方法的绑定,深入理解 Vue.js 组件扩展与插槽
主要代码:

<template><div><el-input v-bind="$attrs" v-on="$listeners" ref="inputRef"><template v-for="(_, slotName) in $slots" v-slot:[slotName]><slot :name="slotName"></slot></template></el-input></div>
</template><script>
export default {name: "hsk-input",mounted() {this.$nextTick(() => {// 在 mounted 钩子中通过遍历绑定 el-input 的实例方法到 CustomInput 上const inputRef = this.$refs.inputRef;console.log("$slots",inputRef);const methodsToBind = Object.getOwnPropertyNames(Object.getPrototypeOf(inputRef));// 遍历子组件中用到的了el-input的所有方法施礼道customInput上面去methodsToBind.forEach((method) => {if (typeof inputRef[method] === "function") {this[method] = inputRef[method].bind(inputRef);}});// 如果需要添加自定义方法,可以在这里定义this.customMethod = () => {console.log("This is a custom method in CustomInput component");};});},created() {},methods: {},
};
</script>

父组件使用,并通过 @focus="handleFocus"调用子组件中elementui自带的focus方法的方法

<template><div><hsk-inputv-model="inputValue"placeholder="请输入"ref="customInputRef"@focus="handleFocus"type="text"clearable></hsk-input></div>
</template><script>
import HskInput from "../package/hsk-input/index.vue";
export default {components: {HskInput,},data() {return {inputValue: "",};},methods: {handleButtonClick() {console.log("handleButtonClick");},handleFocus() {console.log("我是获取焦点");},},
};
</script>

组件二次封装,通过属性事件透传,插槽使用,组件实例方法的绑定,深入理解 Vue.js 组件扩展与插槽

代码解释

const inputRef = this.$refs.inputRef;其中this.$refs是一个对象,保存着模板中使用ref属性定义的引用信息。这里通过inputRef获取到了el-input组件的DOM引用。

const methodsToBind = Object.getOwnPropertyNames(Object.getPrototypeOf(inputRef));这段代码用来获取inputRef(即el-input组件实例)的所有可枚举属性名,包括原型链上的方法。这样做是为了之后遍历并绑定这些方法到当前组件实例上。

methodsToBind.forEach((method) => { ... })遍历从inputRef获取到的所有方法名称,对于每个方法,检查是否为函数类型。如果是函数,则通过bind(inputRef)将其绑定到当前组件实例(this)上。这意味着你可以在自定义组件实例上调用这些原本属于el-input的方法,而不需要直接操作DOM或引用el-input的实例,提高了代码的抽象层次和可维护性。

自定义方法的添加

        customMethod:除了透传和绑定原有方法外,我们还可以在封装组件中添加自定义功能,进一步增强组件的能力。这展示了组件封装不仅仅是简单的“转发”,更是对原始功能的拓展和创新。

this.customMethod = () => { ... }定义了一个新的方法customMethod作为自定义组件的扩展。这个方法简单地打印一条消息到控制台,演示了如何在封装组件时添加额外的业务逻辑或功能。

mounted() {this.$nextTick(() => {.........// 如果需要添加自定义方法,可以在这里定义this.customMethod = () => {console.log("This is a custom method in CustomInput component");};});},

实践意义

        通过这样的封装,HSK-Input组件不仅继承了el-input的所有特性,还提供了额外的便利性和可扩展性。开发者在使用这个组件时,不仅可以像使用原生el-input那样配置和交互,还能享受到自定义方法带来的便利,以及通过插槽灵活插入内容的能力,大大提升了开发体验和维护性。

结语

        组件封装是Vue开发中的一个重要实践,它要求开发者不仅要熟悉Vue的基础知识,还要具备良好的设计思维,以实现组件的高复用性和易用性。本文通过HSK-Input组件的实例,展示了如何通过属性透传、事件绑定、插槽使用以及方法扩展等技术点,高效且优雅地完成组件的封装与升级。希望这一实践能为你的Vue项目开发带来新的启示和帮助。

所有代码

子组件所有代码:

<template><div><el-input v-bind="$attrs" v-on="$listeners" ref="inputRef"><template v-for="(_, slotName) in $slots" v-slot:[slotName]><slot :name="slotName"></slot></template></el-input></div>
</template><script>
export default {name: "hsk-input",mounted() {this.$nextTick(() => {// 在 mounted 钩子中通过遍历绑定 el-input 的实例方法到 CustomInput 上const inputRef = this.$refs.inputRef;console.log("$slots",inputRef);const methodsToBind = Object.getOwnPropertyNames(Object.getPrototypeOf(inputRef));// 遍历子组件中用到的了el-input的所有方法施礼道customInput上面去methodsToBind.forEach((method) => {if (typeof inputRef[method] === "function") {this[method] = inputRef[method].bind(inputRef);}});// 如果需要添加自定义方法,可以在这里定义this.customMethod = () => {console.log("This is a custom method in CustomInput component");};});},created() {},methods: {},
};
</script>

父组件所有代码

<template><div><hsk-inputv-model="inputValue"placeholder="请输入"ref="customInputRef"@focus="handleFocus"type="text"clearable><template v-slot:prepend><span>http://</span></template><template v-slot:suffix><i class="el-input__icon el-icon-date"></i></template><template v-slot:append><el-button @click="handleButtonClick">Submit</el-button></template></hsk-input></div>
</template><script>
import HskInput from "../package/hsk-input/index.vue";
export default {components: {HskInput,},data() {return {inputValue: "",};},mounted() {this.$nextTick(() => {console.log("this.$refs.customInputRef", this.$refs.customInputRef);});},methods: {handleButtonClick() {console.log("handleButtonClick");},handleFocus() {console.log("我是获取焦点");},},
};
</script><style>
</style>

最终效果:

组件二次封装,通过属性事件透传,插槽使用,组件实例方法的绑定,深入理解 Vue.js 组件扩展与插槽

这篇关于组件二次封装,通过属性事件透传,插槽使用,组件实例方法的绑定,深入理解 Vue.js 组件扩展与插槽的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1057622

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

Nginx安全防护的多种方法

《Nginx安全防护的多种方法》在生产环境中,需要隐藏Nginx的版本号,以避免泄漏Nginx的版本,使攻击者不能针对特定版本进行攻击,下面就来介绍一下Nginx安全防护的方法,感兴趣的可以了解一下... 目录核心安全配置1.编译安装 Nginx2.隐藏版本号3.限制危险请求方法4.请求限制(CC攻击防御)

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法