vue3组件的inheritAttrs属性

inheritAttrs为true(默认)子组件不注册a属性,标签上依然继承父组件上写的a属性,为false时不继承父组件写的a属性;不管inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性无法在 <script setup> 声明的选项父组件<script setup>import {} from 'vue';im

有梦想的小猪

3402人浏览 · 2021-11-18 11:17:53

有梦想的小猪 · 2021-11-18 11:17:53 发布

inheritAttrs为true(默认)子组件不注册a属性,标签上依然继承父组件上写的a属性,为false时不继承父组件写的a属性;
不管inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性
无法在 <script setup> 声明的选项

父组件

<script setup>
import {} from 'vue';
import inheritAttrs from './inheritAttrs.vue'
</script>

<template>
	<inheritAttrs a="111" />
</template>

子组件(inheritAttrs: true)

<script>
export default {
  inheritAttrs: true,
  mounted() {
    console.log('this.$attrs--', this.$attrs)
  }
}
</script>

<template>
  <div>子组件</div>
</template>

element

console

子组件(inheritAttrs: false)

<script>
export default {
  inheritAttrs: false,
  mounted() {
    console.log('this.$attrs', this.$attrs)
  }
}
</script>

<template>
  <div>子组件</div>
</template>

element