vue3.0 透传 Attribute

目录

效果一（子组件只有一个根节点，透传生效）

效果二（子组件有多个根节点，透传未生效，且控制台会抛出警告）

效果三（子节点如果不是单根节点的时候，可以通过添加:="$attrs"属性进行透传）

效果四（子节点是单根节点，但是不希望进行透传，inheritAttrs设置为false即不接收属性的透传）

---

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

---

透传特性：

• 透传的属性只会直接传给单根节点的组件，如果子组件有多个根节点，透传属性不会生效且控制台会抛出警告
• 透传过去的属性ID获取需要在dom节点加载结束进行，否则获取不到
• 透传属性命名和子组件上的重复，属性值不会生效

---

效果一（子组件只有一个根节点，透传生效）

子组件 son.vue

<template>
  <button class="btn-style">btn</button>
</template>

父组件 home.vue

<template>
  <son class="home-style"/>
</template>

<script>
import sonfrom '@/components/son.vue'

export default {
  name: 'HomeView',
  components: {
    son
  }
}
</script>

结果：

<button class="btn-style home-style">btn</button>

---

效果二（子组件有多个根节点，透传未生效，且控制台会抛出警告）

子组件 son.vue

<template>
  <button class="btn-style">btn1</button>
  <button class="btn-style">btn2</button>
</template>

父组件 home.vue

<template>
  <son class="home-style"/>
</template>

<script>
import sonfrom '@/components/son.vue'

export default {
  name: 'HomeView',
  components: {
    son
  }
}
</script>

结果：

<button class="btn-style">btn</button>

<button class="btn-style">btn</button>

---

效果三（子节点如果不是单根节点的时候，可以通过添加:="$attrs"属性进行透传）

子组件 son.vue

<template>
  <button class="btn-style">btn1</button>
  <button class="btn-style" :="$attrs">btn2</button>
</template>

 父组件 home.vue

<template>
  <son class="home-style"/>
</template>

<script>
import sonfrom '@/components/son.vue'

export default {
  name: 'HomeView',
  components: {
    son
  }
}
</script>

 结果：

<button class="btn-style">btn1</button>

<button class="btn-style home-style">btn2</button>

---

效果四（子节点是单根节点，但是不希望进行透传，inheritAttrs设置为false即不接收属性的透传）

子组件 son.vue

<template>
  <button class="btn-style">btn</button>
</template>


<script>
export default {
  inheritAttrs: false,
};
</script>

父组件 home.vue 

<template>
  <son class="home-style"/>
</template>

<script>
import sonfrom '@/components/son.vue'

export default {
  name: 'HomeView',
  components: {
    son
  }
}
</script>

结果：

 <button class="btn-style">btn</button>