Vue3教程：英雄指南（二）

前言

最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8

之前的内容请看Vue3教程：英雄指南（一）

编写子组件

此刻，Heroes.vue同时显示了英雄列表和所选英雄的详情。

将所有特性都放在同一个组件中，将会使应用变大后变得难以维护。你要把大型组件拆分成小一点的子组件，每个子组件都要集中精力处理某个特定的任务或工作流。

在本节，你将把英雄详情移入一个独立的、可复用的单文件组件HeroDetail.vue。

Heroes.vue 将仅仅用来表示英雄列表。 HeroDetail.vue 将用来表示所选英雄的详情。

制作HeroDetail.vue

步骤与Vue3教程：英雄指南（一）中创建单页面组件时一致，先新建一个文件，之后键入对应的代码。

从 Heroes组件 模板的底部把表示英雄详情的 HTML 代码剪切粘贴到所生成的 HeroDetail组件 模板中。

所粘贴的 HTML 引用了 selectedHero。 新的 HeroDetail组件 可以展示任意英雄，而不仅仅所选的。因此还要把模板中的所有 selectedHero 替换为 hero。

完工之后，HeroDetail组件 的模板应该是这样的：

<template>
  <div v-if="hero.name">
    <h2>{
  { heroCap }} Details</h2>
    <div><span>id: </span>{
  { hero.id }}</div>
    <div>
      <label
        >na