快捷導(dǎo)航

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

更新時(shí)間：2023年06月20日 10:58:09 作者：jieyucx

這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue3 v-bind=“$attrs” 繼承組件全部屬性

當(dāng)我們?cè)诙畏庋belement-plus組件時(shí)，常常遇到其當(dāng)中組件的屬性過(guò)多要不要每個(gè)都拎出來(lái)寫一遍的情況，其實(shí)沒(méi)必要，v-bind="$attrs"很好的解決了這個(gè)問(wèn)題，比如我們封裝一下時(shí)間選擇組件代碼如下：

父組件中使用：

<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({
  // 開(kāi)始時(shí)間的占位符
  startPlaceholder: {
    type: String,
    default: '請(qǐng)選擇開(kāi)始時(shí)間'
  },
  // 結(jié)束時(shí)間的占位符
  endPlaceholder: {
    type: String,
    default: '請(qǐng)選擇結(jié)束時(shí)間'
  },
  // 開(kāi)始時(shí)間的開(kāi)始選擇
  startTimeStart: {
    type: String,
    default: "08:00"
  },
  // 開(kāi)始時(shí)間的步進(jìn)
  startStep: {
    type: String,
    default: "00:30"
  },
  // 開(kāi)始時(shí)間的結(jié)束選擇
  startTimeEnd: {
    type: String,
    default: "24:00"
  },
  // 結(jié)束時(shí)間的開(kāi)始選擇
  endTimeStart: {
    type: String,
    default: "08:00"
  },
  // 結(jié)束時(shí)間的步進(jìn)
  endStep: {
    type: String,
    default: "00:30"
  },
  // 結(jié)束時(shí)間的結(jié)束選擇
  endTimeEnd: {
    type: String,
    default: "24:00"
  },
})
let emits = defineEmits(['startChange', 'endChange'])
// 開(kāi)始時(shí)間
let startTime = ref<string>('')
// 結(jié)束時(shí)間
let endTime = ref<string>('')
// 是否禁用結(jié)束時(shí)間
let endTimeDisabled = ref<boolean>(true)
// 監(jiān)聽(tīng)開(kāi)始時(shí)間的變化
watch(() => startTime.value, val => {
  if (val === '') {
    endTime.value = ''
    endTimeDisabled.value = true
  }
  else {
    endTimeDisabled.value = false
    // 給父組件分發(fā)事件
    emits('startChange', val)
  }
})
// 監(jiān)聽(tīng)結(jié)束時(shí)間的變化
watch(() => endTime.value, val => {
  if (val !== '') {
    emits('endChange', {
      startTime: startTime.value,
      endTime: val
    })
  }
})
</script>
<style lang='scss' scoped>
</style>

如上例所示，props中我們只是封裝了el-time-select中的部分屬性，我們?cè)谧咏M件中用的時(shí)候可以傳個(gè)startOptions里面有size和clearable屬性，在封裝是利用v-bind="$attrs.startOptions"就可以很好的繼承啦。當(dāng)然如果不傳startOptions,直接使用v-bind="attrs"是可以繼承所有屬性的

到此這篇關(guān)于vue3 v-bind=“$attrs“ 繼承組件全部屬性的文章就介紹到這了,更多相關(guān)vue3 v-bind=“$attrs“ 繼承組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: