vue文件在＜template＞中使用多个＜el-main＞报错（已解决）

目录

1.原理

2. 根据你的需求，自定义每个 `` 组件的内容。你可以在 `` 标签内部插入文本、其他组件、样式等。

 3. 根据需要添加样式或其他属性到每个 `` 组件。你可以使用 `class`、`style` 或其他属性来自定义每个组件的外观和行为。

4.一个可以运行的总代码如下

5.我的一些思考

---

1.原理

在<el-main>外面用<div>小盒子套起来。

在使用 `<div>` 标签来包裹 `<el-main>` 标签时，它们就像是在一个容器内部嵌套了多个 `<el-main>` 标签。这样做是因为 `<div>` 标签是一个常用的 HTML 容器元素，它可以用来包裹和组织其他元素。

当你想要在一个页面中插入多个 `<el-main>` 组件时，你可以使用 `<div>` 标签或其他容器元素来创建一个父容器，并在父容器中放置多个 `<el-main>` 组件。这样，每个 `<el-main>` 组件都会被限定在其父容器中，并且它们之间不会冲突。

示例代码中的 `<div>` 元素实际上充当了一个父容器的角色，在这个容器中可以包含任意数量的 `<el-main>` 组件。它们之间没有直接的联系，因此可以在容器中以独立的方式放置、排列和自定义每个 `<el-main>` 组件。

总而言之，使用 `<div>` 或其他容器元素来包裹 `<el-main>` 组件，可以帮助你创建多个组件的布局，而不会影响彼此的样式和行为。

 在你的模板中，复制并粘贴 `<el-main>` 组件的代码，插入到需要的位置。例如，如果你想要插入两个 `<el-main>` 组件，可以这样写：

<template>
     <div>
       <el-main>
         第一个 <el-main>
       </el-main>

       <el-main>
         第二个 <el-main>
       </el-main>
     </div>
   </template>