vue的组件有一个特性,当我们给组件设置attr属性,而这个属性在组件中并没有props设置的,那么他就会默认挂载到组件的根元素上。

例子:

<template>
  <div>我是一个ddd组件</div>
</template>
<template>
  <ddd class="ddd" />
</template>
<script>
import ddd from "./ddd";
export default {
  components:{
    ddd
  }
}
</script>

我们给组件的标签添加了一个class属性,这个属性在props里面没有配置,并且是一个原生的html属性。

渲染

<div class="ddd">我是一个ddd组件</div>

你可以看到,class原封不动的赋值给了组件的根元素上。

如果我们不需要这个特性,我们可以关闭这个效果

<template>
  <div>我是一个ddd组件</div>
</template>
<script>
export default {
  inheritAttrs: false,  //默认为true
}
</script>

这样就能关闭这个自动赋值到根元素的效果。

分类: vue 开发实战 标签: 属性vue根元素挂载inheritAttrs

评论

暂无评论数据

暂无评论数据

目录