vue3 v-bind="$attrs"继承组件全部属性的解决方案
作者：jieyucx
这篇文章主要介绍了vue3 v-bind=“$attrs“ 继承组件全部属性的解决方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue3 v-bind=“$attrs” 继承组件全部属性
当我们在二次封装element-plus组件时，常常遇到其当中组件的属性过多要不要每个都拎出来写一遍的情况，其实没必要，v-bind="$attrs"很好的解决了这个问题，比如我们封装一下时间选择组件代码如下：
父组件中使用：
<template>
<div>
<m-choose-time
:startOptions="startOptions"
@startChange="startChange"
@endChange="endChange">
</m-choose-time>
</div>
</template>
<script lang='ts' setup>
let startOptions = {
size: 'mini',
clearable: false
}
</script>
<style lang='scss' scoped>
</style>子组件代码：
<template>
<div style="display: flex;">
<div style="margin-right: 20px;">
<el-time-select
v-model="startTime"
:placeholder="startPlaceholder"
:start="startTimeStart"
:step="startStep"
:end="startTimeEnd"
v-bind="$attrs.startOptions"
></el-time-select>
</div>
<div>
<el-time-select
v-model="endTime"
:min-time="startTime"
:placeholder="endPlaceholder"
:start="endTimeStart"
:step="endStep"
:end="endTimeEnd"
:disabled="endTimeDisabled"
v-bind="$attrs.endOptions"
></el-time-select>
</div>
</div>
</template>
<script lang='ts' setup>
import {ref, watch} from 'vue'
let props = defineProps({
// 开始时间的占位符
startPlaceholder: {
type: String,
default: '请选择开始时间'
},
// 结束时间的占位符
endPlaceholder: {
type: String,
default: '请选择结束时间'
},
// 开始时间的开始选择
startTimeStart: {
type: String,
default: "08:00"
},
// 开始时间的步进
startStep: {
type: String,
default: "00:30"
},
// 开始时间的结束选择
startTimeEnd: {
type: String,
default: "24:00"
},
// 结束时间的开始选择
endTimeStart: {
type: String,
default: "08:00"
},
// 结束时间的步进
endStep: {
type: String,
default: "00:30"
},
// 结束时间的结束选择
endTimeEnd: {
type: String,
default: "24:00"
},
})
let emits = defineEmits(['startChange', 'endChange'])
// 开始时间
let startTime = ref<string>('')
// 结束时间
let endTime = ref<string>('')
// 是否禁用结束时间
let endTimeDisabled = ref<boolean>(true)
// 监听开始时间的变化
watch(() => startTime.value, val => {
if (val === '') {
endTime.value = ''
endTimeDisabled.value = true
}
else {
endTimeDisabled.value = false
// 给父组件分发事件
emits('startChange', val)
}
})
// 监听结束时间的变化
watch(() => endTime.value, val => {
if (val !== '') {
emits('endChange', {
startTime: startTime.value,
endTime: val
})
}
})
</script>
<style lang='scss' scoped>
</style>如上例所示，props中我们只是封装了el-time-select中的部分属性，我们在子组件中用的时候可以传个startOptions里面有size和clearable属性，在封装是利用v-bind="$attrs.startOptions"就可以很好的继承啦。当然如果不传startOptions,直接使用v-bind="attrs"是可以继承所有属性的
到此这篇关于vue3 v-bind=“$attrs“ 继承组件全部属性的文章就介绍到这了,更多相关vue3 v-bind=“$attrs“ 继承组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！