沈阳自助建站软件,广东建设安全质量协会网站,中国站长站,王烨鑫今天产品经理要求做保留某组件全部功能#xff0c;还要在它的基础上增加东西。如果不嫌麻烦的话就笨办法#xff0c;但是想一下怎么只用少量代码高效的二次封装组件呢
Vue中的$attrs
在 Vue2 中#xff0c;attr 是指组件接收的 HTML 特性(attribute)#xff0c;通过 prop…今天产品经理要求做保留某组件全部功能还要在它的基础上增加东西。如果不嫌麻烦的话就笨办法但是想一下怎么只用少量代码高效的二次封装组件呢
Vue中的$attrs
在 Vue2 中attr 是指组件接收的 HTML 特性(attribute)通过 props 的方式传递给子组件。 而在 Vue3 中attr 的概念被引入了 Composition API 中并且被用于管理各种配置项。
Vue2 中使用 attr
1、使用 v-bind指令绑定 HTML 属性 在 Vue2 中如果想将父组件传递的 HTML 属性传递给子组件进行使用可以在子组件中通过 props 接收参数并使用 v-bind 指令将其绑定到子组件的 HTML 元素上。例如
templatediv classdemo-component :stylestyleObject{{ message }}/div
/templatescript
export default {name: DemoComponent,props: {message: String,styleObject: Object,},
};
/script在父组件中使用该组件时可以通过 v-bind 指令将 HTML 特性传递给子组件
templatedemo-component messageHello, world! :style-object{ color: red }/demo-component
/template
2、使用 $attrs 对象传递所有未被 props 所接收的特性 在 Vue2 中可以通过 $attrs 对象获取父组件传递给子组件但未被 props 所接收的特性从而实现组件复用和扩展的目的。例如
templatediv classdemo-component :stylestyleObject v-bind$attrs{{ message }}/div
/templatescript
export default {name: DemoComponent,props: {message: String,styleObject: Object,},
};
/script在父组件使用该组件时可以像平常传递普通的 HTML 特性一样同时还可以传递一些自定义的特性
templatedemo-componentmessageHello, world!:style-object{ color: red }custom-attributesomething/demo-component
/template
在子组件中可以通过 this.$attrs 属性获取父组件传递给子组件但未被 props 所接收的特性
console.log(this.$attrs.customAttribute); // 输出somethingVue3 中使用 attr
在 Vue3 中可以通过 setup 函数中的第二个参数 context 来访问该组件的配置选项其中包括了所有未被 props 所接收的特性
templatediv classdemo-component :stylestyleObject v-bind$attrs{{ message }}/div
/templatescript
export default {name: DemoComponent,props: {message: String,styleObject: Object,},setup(props, context) {console.log(context.attrs.customAttribute); // 输出something},
};
/script
在 setup 函数中通过 context.attrs 获取父组件传递给子组件但未被 props 所接收的特性。 除了 $attrsVue3 中还引入了 $props 对象它是一个由 props 组成的响应式对象在组件内部通过解构赋值可以快速地访问 props 的属性值
templatediv classdemo-component :stylestyleObject{{ message }}/div
/templatescript
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 组件从而达到只用少量代码在原有组件上升级的效果
templateel-input v-bind$attrs v-on$listeners :class{ is-invalid: isError }template v-ifisError #appendi classel-input__icon el-icon-circle-close/i/template/el-input
/templatescript
export default {name: MyInput,inheritAttrs: false,props: {isError: Boolean, // 是否显示错误提示},
};
/script
style scoped langscss
//这是写自己的样式内容
/style
讲解 1、使用 v-bind“$attrs” 将父级组件所有的未被 props 所接收的特性绑定到 el-input 组件上。
2、使用 v-on“$listeners” 将父级组件传递给当前组件的所有事件监听器绑定到 el-input 组件上。
3、在模板中可以很方便地使用 isError 属性来扩展组件并且不需要在父组件中再次定义。
需要注意的是由于 element-ui 组件本身也包含了一些默认的属性和事件因此需要在组件中设置 inheritAttrs: false以避免传递 element-ui 组件自带的属性和事件。
