浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用

官方API

inheritAttrs

2.4.0 新增，类型：boolean，默认值：true

详细：

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。

注意：这个选项不影响 class 和 style 绑定。

使用介绍

官方的解释看上去很唬人，其实默认情况就是把 $attrs 对象上没在子组件 props 中声明的属性加在子组件的根 html 标签上

上示例

<template>
 <div>
  <p>我是父组件</p>
  <test name="tom" age="12" class="child" style="color: red" />
 </div>
</template>
<script>
export default {
 components: {
  test: {
   template: `<p>我是子组件</p>`,
   props: ["name"],
   inheritAttrs: true, // 默认为 true
   created() {
    console.log(this.$attrs); // {age: "12"}
   }
  }
 }
};
</script>

可以看到父组件传给子组件传了 name、age 两个属性，其中 name 属性在子组件 props 中声明，以上代码浏览器解析后

<div>
 <p data-v-469af010>我是父组件</p>
 <p data-v-469af010 age="12" class="child" style="color: red;">我是子组件</p>
</div>

可以看到没有在子组件 props 中声明的 age 属性被写到了标签里，如果你不希望这样，则可以把子组件中的 inheritAttrs 设为 false，解析后的结果如下

<div>
 <p data-v-469af010>我是父组件</p>
 <p data-v-469af010 class="child" style="color: red;">我是子组件</p>
</div>

可以看到标签中的属性消失了，同时可以看到 class、style 属性不受影响

至此 inheritAttrs 的介绍结束

到此这篇关于浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用的文章就介绍到这了,更多相关Vue2.4.0 $attrs与inheritAttrs内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！