vue3?v-bind="$attrs"繼承組件全部屬性的解決方案

更新時間：2023年06月20日 10:58:09 作者：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: '請選擇開始時間'
  },
  // 結(jié)束時間的占位符
  endPlaceholder: {
    type: String,
    default: '請選擇結(jié)束時間'
  },
  // 開始時間的開始選擇
  startTimeStart: {
    type: String,
    default: "08:00"
  },
  // 開始時間的步進
  startStep: {
    type: String,
    default: "00:30"
  },
  // 開始時間的結(jié)束選擇
  startTimeEnd: {
    type: String,
    default: "24:00"
  },
  // 結(jié)束時間的開始選擇
  endTimeStart: {
    type: String,
    default: "08:00"
  },
  // 結(jié)束時間的步進
  endStep: {
    type: String,
    default: "00:30"
  },
  // 結(jié)束時間的結(jié)束選擇
  endTimeEnd: {
    type: String,
    default: "24:00"
  },
})
let emits = defineEmits(['startChange', 'endChange'])
// 開始時間
let startTime = ref<string>('')
// 結(jié)束時間
let endTime = ref<string>('')
// 是否禁用結(jié)束時間
let endTimeDisabled = ref<boolean>(true)
// 監(jiān)聽開始時間的變化
watch(() => startTime.value, val => {
  if (val === '') {
    endTime.value = ''
    endTimeDisabled.value = true
  }
  else {
    endTimeDisabled.value = false
    // 給父組件分發(fā)事件
    emits('startChange', val)
  }
})
// 監(jiān)聽結(jié)束時間的變化
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“ 繼承組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: