vue3 v-bind="$attrs" solution to inherit all the properties of the component

vue3 v-bind="$attrs" inherits all the properties of the component

When we encapsulate element-plus components twice, we often encounter the situation where there are too many attributes of the components in it. Do we need to write each one out? In fact, it is not necessary. v-bind="$attrs" solves this problem very well. For example, we encapsulate the time selection component code as follows:

Used in parent component:

<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>

Subcomponent code:

&lt;template&gt;
  &lt;div style="display: flex;"&gt;
    &lt;div style="margin-right: 20px;"&gt;
      &lt;el-time-select
        v-model="startTime"
        :placeholder="startPlaceholder"
        :start="startTimeStart"
        :step="startStep"
        :end="startTimeEnd"
        v-bind="$"
      &gt;&lt;/el-time-select&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;el-time-select
        v-model="endTime"
        :min-time="startTime"
        :placeholder="endPlaceholder"
        :start="endTimeStart"
        :step="endStep"
        :end="endTimeEnd"
        :disabled="endTimeDisabled"
        v-bind="$"
      &gt;&lt;/el-time-select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script lang='ts' setup&gt;
import {ref, watch} from 'vue'
let props = defineProps({
  // Placeholder for start time  startPlaceholder: {
    type: String,
    default: 'Please select the start time'
  },
  // Placeholder for end time  endPlaceholder: {
    type: String,
    default: 'Please select the end time'
  },
  // Start selection of start time  startTimeStart: {
    type: String,
    default: "08:00"
  },
  // Steps of the start time  startStep: {
    type: String,
    default: "00:30"
  },
  // End selection of start time  startTimeEnd: {
    type: String,
    default: "24:00"
  },
  // Select the start of the end time  endTimeStart: {
    type: String,
    default: "08:00"
  },
  // Steps of end time  endStep: {
    type: String,
    default: "00:30"
  },
  // End selection of end time  endTimeEnd: {
    type: String,
    default: "24:00"
  },
})
let emits = defineEmits(['startChange', 'endChange'])
// Start timelet startTime = ref&lt;string&gt;('')
// End timelet endTime = ref&lt;string&gt;('')
// Whether to disable the end timelet endTimeDisabled = ref&lt;boolean&gt;(true)
// Changes in monitoring start timewatch(() =&gt; , val =&gt; {
  if (val === '') {
     = ''
     = true
  }
  else {
     = false
    // Distribute events to parent component    emits('startChange', val)
  }
})
// Changes in the listening end timewatch(() =&gt; , val =&gt; {
  if (val !== '') {
    emits('endChange', {
      startTime: ,
      endTime: val
    })
  }
})
&lt;/script&gt;
&lt;style lang='scss' scoped&gt;
&lt;/style&gt;

As shown in the above example, in props, we only encapsulate some properties in el-time-select. When we use it in subcomponents, we can pass on the size and clearable properties in the startOptions. In the encapsulation, we can inherit it very well by using v-bind="$". Of course, if you do not pass startOptions, you can inherit all attributes by directly using v-bind="attrs"

This is the article about the inheritance of all the properties of vue3 v-bind="$attrs" in this article. For more related vue3 v-bind="$attrs" in inheriting component content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!