今天产品经理要求做保留某组件全部功能,还要在它的基础上增加东西。如果不嫌麻烦的话就笨办法,但是想一下怎么只用少量代码高效的二次封装组件呢
Vue中的$attrs
在 Vue2 中,attr 是指组件接收的 HTML 特性(attribute),通过 props 的方式传递给子组件。
而在 Vue3 中,attr 的概念被引入了 Composition API 中,并且被用于管理各种配置项。
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>
复制
2、使用 $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 组件自带的属性和事件。