Vue 3 迁移策略笔记—— 第12节：片段

前言

本笔记主要基于官方文档《迁移策略—— 片段》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

概述

Vue 3.x 支持组件内多个根节点，也就是片段！

Vue 2.x 组件写法

在 Vue 2.x，组件不支持多根节点。所以，组件的写法只能如下：

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Vue 3.x 组件写法

在 Vue3.x 中，Vue 对组件的写法做了调整，允许组件有多个根节点。但是，需要开发人员明确定义属性应该由哪个根节点继承。

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

Vue 3.x 属性继承

单根节点自动继承属性

当组件内只有一个根节点时，将自动向根节点的属性添加非prop属性。如下：

定义date-picker组件：

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

如下调用：

<date-picker data-status="activated"></date-picker>

最终渲染的结果：

<div class="date-picker" data-status="activated">
  <input type="datetime" />
</div>

禁止根节点自动继承属性

有的时候，我们并不希望根节点继承属性而是在根节点以外的其他元素继承属性。可以这么做：

1. 禁止根节点自动继承属性：组件的Option添加inheritAttrs: false
2. 在需要继承属性的元素添加v-bind:$attrs

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

多根节点不自动继承属性

与单根节点组件不同，具有多个根节点的组件不会自动继承属性。我们需要显式设定由谁来继承。 如果未显式绑定$attrs，则将发出一个运行时警告。

app.component('custom-layout', {
  template: `
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  `
})

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听