©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>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"是可以继承所有属性的