Vue3 inheritAttrs与$attrs

285 阅读1分钟

inheritAttrs默认为true

子组件的根元素会继承所有属性 父组件

<template>
  <div>
     <LocalComponent type="text" a="aaa" b="bbb">

     </LocalComponent>
  </div>
</template>
<script setup lang="ts">
import LocalComponent from "../components/component/LocalComponent.vue"
</script>

子组件

<template>
    <div>
        <input v-bind="$attrs"/>
    </div>
</template>

image.png

inheritAttrs设置为false

并且给子组件中的input设置v-bind='$attrs' 父组件

<template>
  <div>
     <LocalComponent type="text" a="aaa" b="bbb">

     </LocalComponent>
  </div>
</template>
<script setup lang="ts">
import LocalComponent from "../components/component/LocalComponent.vue"
</script>

子组件

<template>
    <div>
        <input v-bind="$attrs"/>
    </div>
</template>
<script lang="ts" setup>
import { defineOptions} from 'vue';

defineOptions({
    inheritAttrs:false,
})
</script>

如下图:

image.png