vue3 設置組件的默認$attrs

使用組件的時候，如果需要傳入組件props之外的屬性，默認會只傳到組件的最外層元素
比如組件結構如下

<template>
  <div class="validate-input-container pb-3">
    <input
      type="text"
      class="form-control"
      :value="modelValue"
      @input="updateVal"
      @blur="validateInput"
      v-bind="$attrs"
      :class="{ 'is-invalid': inputRef.error }"
    />
    <span v-if="inputRef.error" class="invalid-feedback">{{ inputRef.msg }}</span>
  </div>
</template>

// script
const props = defineProps<{
  rules: RulesProp;
  // inputRef: {val: string}
  modelValue: string;
}>();

使用的時候，想要傳遞自定義的 placeholder 屬性
這個時候，就需要先用inheritAttrs禁用默認的屬性傳遞

<script lang="ts">
// normal `<script>`, executed in module scope (only once)
// declare additional options
import { ref, useAttrs } from 'vue';
export default {
  name: 'ValidateInput',
  inheritAttrs: false,
  customOptions: {}
};
</script>


// setup語法糖需要額外定義一個script才能定義name和inherAttrs
<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
  }
</script>

<script setup>
  // script setup logic
</script>

然后給組件通過v-bind="$attrs"綁定默認屬性，如上面的代碼已經綁定好了
如果想要獲取父組件傳遞的屬性，則可以通過useAttrs()獲取

// 導入 useAttrs 組件
import { ref, useAttrs } from 'vue';

// 獲取
console.log(useAttrs(), 'useAttrs');