这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

先来看一个业务需求:

项目经常会遇到产品经理要求你做某组件一样的功能,还要在它的基础上增加东西。如何只用少量代码高效的二次封装组件呢?

例如我要做一个element-ui的input组件进行封装,以下是封装要求:

  1. 对el-input组件增加某些定制功能
  2. 调整el-input的原有css样式
  3. 封装后不得更改原有el-input的所有功能

文章最后会给出element-ui的input组件二次封装的示例。

先来介绍一下attrs吧

在 Vue2 中,attr 是指组件接收的 HTML 特性(attribute),通过 props 的方式传递给子组件。而在 Vue3 中,attr 的概念被引入了 Composition API 中,并且被用于管理各种配置项。

下面介绍一些 attr 的使用技巧:

Vue2 中使用 attr

  1. 使用 v-bind指令绑定 HTML 属性

在 Vue2 中,如果想将父组件传递的 HTML 属性传递给子组件进行使用,可以在子组件中通过 props 接收参数,并使用 v-bind 指令将其绑定到子组件的 HTML 元素上。例如:

<template>
<div class="demo-component" :style="styleObject">{{ message }}</div>
</template> <script>
export default {
name: "DemoComponent",
props: {
message: String,
styleObject: Object,
},
};
</script>

在父组件中使用该组件时,可以通过 v-bind 指令将 HTML 特性传递给子组件:

<template>
<demo-component message="Hello, world!" :style-object="{ color: 'red' }"></demo-component>
</template>
  1. 使用 $attrs 对象传递所有未被 props 所接收的特性

在 Vue2 中,可以通过 $attrs 对象获取父组件传递给子组件但未被 props 所接收的特性,从而实现组件复用和扩展的目的。例如:

<template>
<div class="demo-component" :style="styleObject" v-bind="$attrs">{{ message }}</div>
</template> <script>
export default {
name: "DemoComponent",
props: {
message: String,
styleObject: Object,
},
};
</script>

在父组件使用该组件时,可以像平常传递普通的 HTML 特性一样,同时还可以传递一些自定义的特性:

<template>
<demo-component
message="Hello, world!"
:style-object="{ color: 'red' }"
custom-attribute="something"
></demo-component>
</template>

在子组件中,可以通过 this.$attrs 属性获取父组件传递给子组件但未被 props 所接收的特性:

console.log(this.$attrs.customAttribute); // 输出:something

Vue3 中使用 attr

在 Vue3 中,可以通过 setup 函数中的第二个参数 context 来访问该组件的配置选项,其中包括了所有未被 props 所接收的特性:

<template>
<div class="demo-component" :style="styleObject" v-bind="$attrs">{{ message }}</div>
</template> <script>
export default {
name: "DemoComponent",
props: {
message: String,
styleObject: Object,
},
setup(props, context) {
console.log(context.attrs.customAttribute); // 输出:something
},
};
</script>

在 setup 函数中,通过 context.attrs 获取父组件传递给子组件但未被 props 所接收的特性。

除了 $attrs,Vue3 中还引入了 $props 对象,它是一个由 props 组成的响应式对象,在组件内部通过解构赋值可以快速地访问 props 的属性值:

<template>
<div class="demo-component" :style="styleObject">{{ message }}</div>
</template> <script>
export default {
name: "DemoComponent",
props: {
message: String,
styleObject: Object,
},
setup(props) {
const { message, styleObject } = props;
console.log(message, styleObject); // 输出:Hello, world! { color: 'red' }
},
};
</script>

在 setup 函数中,通过解构赋值可以快速地访问 props 的属性值。

利用 $attrs$listeners 可以在二次封装 element-ui 组件时非常方便地传递组件属性和事件。

示例代码

下面以 el-input 组件为例,演示一下vue2中如何高效地二次封装 element-ui 组件,从而达到只用少量代码在原有组件上升级的效果:

<template>
<el-input v-bind="$attrs" v-on="$listeners" :class="{ 'is-invalid': isError }">
<template v-if="isError" #append>
<i class="el-input__icon el-icon-circle-close"></i>
</template>
</el-input>
</template> <script>
export default {
name: "MyInput",
inheritAttrs: false,
props: {
isError: Boolean, // 是否显示错误提示
},
};
</script>
<style scoped lang="scss">
//这是写自己的样式内容
</style>

解释一下上面代码的内容吧:

  1. 使用 v-bind="$attrs" 将父级组件所有的未被 props 所接收的特性绑定到 el-input 组件上。

  2. 使用 v-on="$listeners" 将父级组件传递给当前组件的所有事件监听器绑定到 el-input 组件上。

  3. 在模板中可以很方便地使用 isError 属性来扩展组件,并且不需要在父组件中再次定义。

需要注意的是,由于 element-ui 组件本身也包含了一些默认的属性和事件,因此需要在组件中设置 inheritAttrs: false,以避免传递 element-ui 组件自带的属性和事件。

本文转载于:

https://juejin.cn/post/7221357811288260664

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--Vue中的$attrs你真的会用吗?的更多相关文章

  1. 记录vue中一些有意思的坑

    记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...

  2. vue中的$attrs属性和inheritAttrs属性

    一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...

  3. [记录] Vue中的dom操作

    使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...

  4. 新人 记录VUE中分页实现

    关于函数传值 this.getPurchaseHistoryData(index, num,timeType);第一位是显示的页数,第二是控制首页4上一页-1下一页是2末页是5 第三是是对昨天是1,今 ...

  5. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  6. 问题记录---关于posiition脱离文档流及vue中this.$route信息

    1.关于position:fixed会脱离文档流 简单例子: 原型有三个div盒子: 将剥box1设置为position:fixed后 从上图可以看出:box1脱离了文档流,且层级显示优先于正常文档, ...

  7. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

  8. 在 Vue 中使用 Typescript

    前言 恕我直言,用 Typescript 写 Vue 真的很难受,Vue 对 ts 的支持一般,如非万不得已还是别在 Vue 里边用吧,不过听说 Vue3 会增强对 ts 的支持,正式登场之前还是期待 ...

  9. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  10. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

随机推荐

  1. 适用于Spring Boot Jar的启停部署脚本

    shell脚本参数 使用-z或-n对一个变量判空时, 若直接使用[ -n ARG ]这种形式,当{ARG}中有空格将会报错, line 27: [: sd: binary operator expec ...

  2. IntersectionObserver对象

    IntersectionObserver对象 IntersectionObserver对象,从属于Intersection Observer API,提供了一种异步观察目标元素与其祖先元素或顶级文档视 ...

  3. ffmpeg之avformat_alloc_output_context2

    函数原型: int avformat_alloc_output_context2(AVFormatContext **ctx, const AVOutputFormat *oformat, const ...

  4. ckeditor实战总结

    介绍 使用范围较广的富文本编辑器.官方文档 config.js的常用配置 参考:https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_conf ...

  5. Java String类的replaceAll方法

    代码勇士真题: 给定一个字符串由a-z字母组成的字符串s,长度任意字母可任意组合. 要求编写函数找出s中不在a-m范围内的字母个数n,要求函数返回字符串格式为:n/s的长度 例如: s="a ...

  6. golang生成一个dll供rundll32.exe调用

    背景: 项目用例需要覆盖场景:window rundll32.exe 调用dll并写一段内容到磁盘, 开始使用msf生成,会被安全软件拦截,索性用go 写一个 代码如下: package main i ...

  7. C++ 多线程的错误和如何避免(13)

    在 async 任务中抛出的异常会被 std::future::get() 触发 #include <future> #include <iostream> int main( ...

  8. C++ 多线程的错误和如何避免(9)

    有时候使用 std::atomic 比使用 mutexes 更高效 问题分析:使用多线程更新一些简单数据时,比如 int 型,bool 型等等,可以使用 std::atomic,这比 mutex 来得 ...

  9. ASP.NET Core MVC应用模型的构建[1]: 应用的蓝图

    我个人觉得这是ASP.NET Core MVC框架体系最核心的部分.原因很简单,MVC框架建立在ASP.NET Core路由终结点上,它最终的目的就是将每个Action方法映射为一个或者多个路由终结点 ...

  10. VS Code实现SSH远程开发

    最近收获一台新台式机,但是个人主要还是使用自己的笔记本,用了几天远程控制,感觉各种不方便,最终决定配置一下VS Code实现SSH远程开发,特此记录. 首先介绍一下环境,控制端是Windows 11, ...