Javascript Vue组件未装入或呈现，且没有错误消息

我有以下两个组件

BrewTitle.vue

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: "Brew Title"
    };
  },
  created() {
    console.log("title created")
  }
};
</script>

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: "Brew Title"
    };
  },
    created() {
        console.log("snackbar created")
    }
};
</script>

在我的html模板中，我有以下代码片段

<div id="app">
<brewtitle />
<snackbar />
</div>
<script src="main.js"></script>

组件几乎相同，但在html页面或视图浏览器扩展中找不到snackbar。网页包没有问题，浏览器中也没有消息

---

我做错了什么？

浏览器不支持如下自动关闭标记：

请尝试使用显式结束标记：

如果对零部件使用自动关闭标记，则浏览器将仅将其视为打开标记。父元素关闭时将创建一个隐式关闭标记。如果没有其他兄弟姐妹的话，这会很好，但如果有兄弟姐妹的话，就会出问题

以您的原始代码为例：

在到达关闭位置之前，不会被视为已关闭。这相当于：

因此

将被视为

的孩子。由于

brewtitle

没有插槽，

snackbar

将被丢弃

这仅适用于浏览器直接解析HTML的情况。对于Vue本身解析的任何内容，例如在

.Vue

文件中，这不会是问题

从Vue官方文档中

没有内容的组件在单文件组件、字符串模板和JSX中应该是自动关闭的，但在DOM模板中永远不能

不幸的是，HTML不允许自定义元素是自动关闭的-只有官方的“void”元素

---

OP表示只有一个组件没有渲染。另外，关于自动关闭标记，您是不正确的~我已经使用相同的方法将其他组件添加到HTML文件中。它们都按预期呈现。@菲尔试着把两个

组件放在一起，你会发现它不起作用。如果您使用

，那么它可以正常工作。@kristiannissen我已经扩展了我的答案，解释了为什么它有时看起来有效，有时无效。您是否看到“…创建的”控制台消息？控制台中没有消息

<div id="app">
<brewtitle />
<snackbar />
</div>
<script src="main.js"></script>