山东建设执业资格注册中心网站官网,微信公众号服务平台电话,白银网站建设白银,个人网站开发用到的技术使用介绍 在Vue.js中#xff0c;$attrs 和v-bind可以用于组件的二次封装#xff0c;以在封装的组件中传递父组件的属性和事件。这对于创建高度可定制的通用组件非常有用。 下面是一些示例代码#xff1a; 假设你有一个名为MyButton的自定义按钮组件#xff0c;它接受一些…使用介绍 在Vue.js中$attrs 和v-bind可以用于组件的二次封装以在封装的组件中传递父组件的属性和事件。这对于创建高度可定制的通用组件非常有用。 下面是一些示例代码 假设你有一个名为MyButton的自定义按钮组件它接受一些常见的按钮属性如disabled、type等然后你想将其二次封装以添加一些额外的样式和功能。以下是如何使用$attrs和v-bind来实现这个目标的示例 templatebuttonclassmy-custom-button !-- 添加自定义样式 --v-bind$attrs !-- 将父组件传递的属性绑定到这个按钮 --:class{ my-special-class: special } !-- 添加额外的类名 --clickhandleClick !-- 添加点击事件处理函数 --slot/slot !-- 保留插槽内容 --/button /templatescript export default {props: {special: Boolean,},methods: {handleClick() {// 处理点击事件this.$emit(click);},}, }; /script在这个示例中MyButton组件接受一个名为special的属性这个属性用于指定是否要添加额外的特殊样式。$attrs用于将所有未明确声明的父组件传递的属性绑定到按钮元素上。然后我们使用:class来添加额外的类名使用click来添加点击事件处理函数同时保留插槽内容以确保父组件可以插入任何需要的内容。 在父组件中你可以像使用普通按钮一样使用MyButton组件并将需要的属性和事件传递给它 templatedivMyButtondisabledtruetypesubmitspecialtrueclickhandleSpecialClickClick me/MyButton/div /templatescript import MyButton from ./MyButton.vue;export default {components: {MyButton,},methods: {handleSpecialClick() {// 处理特殊按钮的点击事件},}, }; /script通过这种方式你可以将MyButton组件进行二次封装以添加额外的功能和样式同时仍然能够从父组件传递属性和事件。这种方法可以创建更加灵活和可定制的组件适应不同的需求。 需要注意 如果不设置 inheritAttrs: false则属性如下所示 而设置 inheritAttrs: false可以来避免这种行为这样后将不继承未明确声明的属性。clearable属性也就不见了。 使用案例 组件二次封装修改 elementUI 的样式 templateel-date-picker v-modelinnerVal v-bind$attrs/el-date-picker /template script export default {name: myDatePicker,components: {},props: {},inheritAttrs: false, // 不继承未明确声明的属性data () {return {innerVal: this.$attrs.value //这里获取 v-model 内容}},methods: {},created () { },mounted () { } } /script style langless scoped /deep/.el-input__inner {background: #071e52;border: 2px solid #36a6f1;border-radius: 2px;color: #fff;cursor: pointer;height: inherit; } /deep/.el-input__icon {line-height: 27px; } /style具体使用 !-- 这里的selectDate也就是组件中所写的 this.value -- my-date-picker v-modelselectDate typedate placeholder选择日期stylemargin-left: 15px;height: 27px; :clearablefalse /my-date-picker