欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue3组件的inheritAttrs属性

程序员文章站 2022-03-27 18:05:37
...
  1. inheritAttrs为true(默认)子组件不注册a属性,标签上依然继承父组件上写的a属性,为false时不继承父组件写的a属性;
  2. 不管inheritAttrs为true或者false,子组件中都能通过$attrs属性获取到父组件中传递过来的属性
  3. 无法在 <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

vue3组件的inheritAttrs属性

console

vue3组件的inheritAttrs属性

  • 子组件(inheritAttrs: false)

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

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

 element

vue3组件的inheritAttrs属性

 console

vue3组件的inheritAttrs属性

相关标签: vue.js 前端 es6