Question

我有以下两个组成部分

BrewTitle.vue

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

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

Snackbar.vue

<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-closing-components-strongly-recommended

不包含任何内容的组件应该在单文件组件，字符串模板和JSX中自动关闭-但绝不能在DOM模板中自动关闭。

...

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

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

1 个答案: