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"是可以继承所有属性的