vuejs 教程,vue3.0 文档,vuejs 实战,前端框架,vuejs 入门,vue3.0 迁移,vue3资讯,Vue3最新动态,vuejs 中文社区,javascript中文网,vuejs 面试题,vuejs bug

# 片段
新增

# 概览

Vue 3 现在正式支持了多根节点的组件,也就是片段!

# 2.x 语法

在 2.x 中,由于不支持多根节点组件,当开发者意外创建一个时会发出警告。为了修复这个问题,许多组件被包裹在一个 <div> 中。

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>
1
2
3
4
5
6
7
8

# 3.x 语法

在 3.x 中,组件可以包含多个根节点!但是,这要求开发者显式定义 attribute 应该分布在哪里。

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>
1
2
3
4
5
6

有关 attribute 继承如何工作的详细信息,见非 Prop 的 Attribute

Js中文网,专注分享前端最新技术、大厂面试题、聊点程序员轶事、职场感悟,做前端技术的传播者.

加入前端布道师交流群

扫描二维码回复 加群 学习,与大厂大佬讨论技术.