Vue 组件接收额外的属性 Attributes

Vue 组件接收额外的属性 Attributes

替换 Attributes

Vue 中的组件可以通过指定Props接收父级传入的属性。

也可以接收非Props 指定的属性 Attributes。

它会默认替换 或 合并到组件模板渲染后的DOM根元素上。

示例：

|- About.vue
|- Compa.vue

// About.vue
<div class="about">
  <Compb title="I from About" />
</div>

// Compa.vue
<div title="I am Compa">
 	<h1>I am Compa</h1>
</div>
// 内部没有使用props接收title属性

Compa 的根元素div上的的 title 会被 About 中传入的title替换，最终渲染为：

<div class="about">
  <div title="I am About">
    <h1>I am Compa</h1>
  </div>
</div>

如果指定了props接收title，当前 Compa 中并没有使用props中的title，Attribute 的 title 不会被影响，会被渲染为：

<div class="about">
  <div title="I am Compa">
    <h1>I am Compa</h1>
  </div>
</div>

合并 Attributes

Vue 中额外传入的 class 和 style 会与组件根元素上的 class 和 style 合并，不需担心被替换。

// About.vue
<div class="about">
  <Compb class="about-Compa" style="color:red;" />
</div>

// Compa.vue
<div class="Compa" style="font-size:14px">
 	<h1>I am Compa</h1>
</div>

最终渲染为：

<div class="about">
  <div class="about-Compa Compa" style="color:red;font-size:14px;">
    <h1>I am Compa</h1>
  </div>
</div>

$attrs

Vue 会将 组件选项 Props 未指定的属性（Attributes ）全部存储到组件实例的 $attrs 属性上（class 和 style 除外）。

并默认将 Attributes 挂载到 根元素 上。

可以使用 $attrs 在组件中的子元素或者其他位置使用 Attributes。

// About.vue
<div class="about">
  <Compb title="I from About" />
</div>

// Compa.vue
<div title="I am Compa">
 	<h1>{{$attrs.title}}</h1>
</div>
// 内部没有使用props接收title属性

Compa 根元素的title会被替换为传入的title，h1标签也会展示传入的title，最终渲染为：

<div class="about">
  <div title="I am About">
    <h1>I am About</h1>
  </div>
</div>

inheritAttrs

Vue 组件的根元素默认会继承父组件传入的 Attributes。

如果你不希望组件的根元素继承 attribute，而是手动的决定那个元素使用哪个 Attribute。

可以通过设置组件的inheritAttrs: false，禁用继承。

// About.vue
<div class="about">
  <Compb title="I from About" />
</div>

// Compa.vue
<div title="I am Compa">
 	<h1>{{$attrs.title}}</h1>
</div>
<script>
  export default {
    inheritAttrs: false // 禁用继承
  }
</script>

最终渲染为：

<div class="about">
  <div title="I am Compa">
    <h1>I am About</h1>
  </div>
</div>

应用场景

如果一个组件A，内部使用了另一个组件B。

在使用组件A的时候，想指定组件B的属性。可以使用$attrs：

// About.vue
<div>
  <Compa title="Compa的title" msg="Compb的message" content="Compb的content"></Compa>
</div>

// Compa.vue
<div>
  <h1>{{title}}</h1>
  <Compb v-bind="$attrs"></Compb>
</div>
<script>
  export default {
    inheritAttrs: false,
    props: ['title']
  }
</script>

// Compb.vue
<div>
  <div class="msg">{{msg}}</div>
  <div class="content">{{content}}</div>
</div>
<script>
  export default {
    props: ['msg','content']
  }
</script>