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');