Vue 组件未安装或渲染，并且没有错误消息

Question

我有以下两个组件

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>

如何将它们添加到 index.js 文件中

import Vue from "vue";

import BrewTitle from "./components/BrewTitle";
import Snackbar from "./components/Snackbar";

Vue.component("brewtitle", BrewTitle);
Vue.component("snackbar", Snackbar);

const app = new Vue({
  el: "#app"
});

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

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

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

我究竟做错了什么？

Answer 1

浏览器不支持这样的自关闭标签：

<brewtitle />
<snackbar />

尝试使用明确的结束标签：

<brewtitle></brewtitle>
<snackbar></snackbar>

如果您为组件使用自关闭标签，那么浏览器只会将其视为开始标签。当父元素关闭时，将创建一个隐式结束标记。如果没有其他兄弟姐妹，那会正常工作，但如果有它就会出错。

所以以你的原始代码为例：

<div id="app">
  <brewtitle />
  <snackbar />
</div>

在<brewtitle>到达结束之前不会算作已结束</div>。所以这相当于：

<div id="app">
  <brewtitle>
    <snackbar></snackbar>
  </brewtitle>
</div>

所以<snackbar>会被当成孩子对待<brewtitle>。由于brewtitle没有插槽，因此snackbar将被丢弃。

这仅适用于浏览器直接解析 HTML 的情况。对于 Vue 本身解析的任何内容，例如在您的.vue文件中，这都不是问题。

来自 Vue 官方文档，https://vuejs.org/v2/style-guide/#Self-closure-components-strongly-recommended

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

...

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