【vue3入门】-【22】 组件attribute透传

透传Attribute

透传Attribute指的是传递给一个组件，却没有被该组件声明为props或emits的attribute或者v-on事件监听器。最常见的列子就是class、style和id。

当一个组件以单个元素为根路径渲染时，透传的attribute会自动被添加到根元素上

app.vue

<template>
  <!--在引用的组件上使用class会生效到组件的根元素上,但是要求是子组件是唯一根元素,否则不会生效-->
  <AttriComponent  class="attr_class"/>
</template>
<script>
import AttriComponent from "./components/attriComponents.vue"
export default{
  components:{
    AttriComponent
  }
}
</script>

<style>
.attr_class{
  color: red;
}
</style>

attriComponents.vue

<template>
	<!--template下最外层的元素只有一个才能生效，否则不会生效-->
    <h3>attribute透传属性</h3>
</template>

禁用attribute继承

attriComponents.vue

<template>
    <h3>attribute透传属性</h3>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    // 可以设置禁止继承父元素透传的attribute，禁用后父级的属性则不会生效
    inheritAttrs: false
}
</script>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9