Vue 多个根节点上的属性继承

Question

非 Prop 的属性说的是不带冒号的属性，比如常见的示例包括 class、style 和 id 属性。

当组件返回单个根节点时，非 prop 属性将自动添加到根节点的属性中。例如，在 <date-picker> 组件的实例中：

app.component('date-picker', {
  template: `
    <div class="date-picker">
      <input type="datetime" />
    </div>
  `
})

如果我们需要通过 data-status 属性定义 <date-picker> 组件的状态，它将应用于根节点 (即 div.date-picker)。

<!-- 具有非prop attribute的Date-picker组件-->
<date-picker data-status="activated"></date-picker>

<!-- 渲染 date-picker 组件 -->
<div class="date-picker" data-status="activated">
  <input type="datetime" />
</div>

Vue 3 中组件现在正式支持多根节点组件。

在 2.x 中，不支持多根组件，当用户意外创建多根组件时会发出警告，因此，为了修复此错误，许多组件被包装在一个 <div> 中。

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

在 3.x 中，组件现在可以有多个根节点！但是，这确实要求开发者明确定义属性应该分布在哪里。

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

多个根节点上的属性继承，与单个根节点组件不同，具有多个根节点的组件不具有自动添加到节点。如果未显式绑定 $attrs，将发出运行时警告。

<custom-layout id="custom-layout" @click="changeValue"></custom-layout>

// 这将发出警告
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  `
})

// 没有警告，$attrs被传递到<main>元素
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  `
})

$attrs 包含了父作用域中不作为组件 props 或自定义事件。