子组件 HTML 在 VueJS 中不可见答案

【问题标题】：Children Component HTML not visible in VueJS子组件 HTML 在 VueJS 中不可见
【发布时间】：2021-07-12 12:42:49
【问题描述】：

我创建了导入到App.vue的主页组件

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <home></home>
</template>

<script>
import home from "./components/home.vue";

export default {
  name: "App",
  components: {
    home
  },
};
</script>

并且header组件被导入Home.vue
Home.vue

<template>
  <header></header>
</template>

<script>
import header from "./header.vue";
export default {
  name: "home",
  components: {
    header: header,
  },
};
</script>

Header.vue

<template>
  <div class="new-component">
    <h1>A New Component</h1>
    <p>This is a text inside the NewComponent.</p>
 </div>
</template>

<script>
export default {
  name: 'header',
}
</script>

当我在浏览器中签入时，我看不到 header.vue 的 HTML

【问题讨论】：

你在哪里使用标题组件？我看到你正在导入它但没有使用它
@jogarcia 立即查看。抱歉，它已在格式化程序中删除
你用的是什么版本的 Vue？
我正在使用 vuejs3
jajjajaja，看看我的回答兄弟，你会觉得很有趣

标签： vuejs3

【解决方案1】：

使用多字名称。您的组件与 HTML 的默认 header 标记冲突。

VueHeader.vue

<template>
  <div class="new-component">
    <h1>A New Component</h1>
    <p>This is a text inside the NewComponent.</p>
  </div>
</template>

 <script>
export default {
  name: "vue-header",
};
</script>

Home.vue

<template>
  <vue-header></vue-header>
</template>

<script>
import VueHeader from "./VueHeader.vue";

export default {
  name: "home",
  components: {
    VueHeader,
  },
};
</script>

您可以在此处Vue style guide 找到有关此问题和其他小问题的更多信息

【讨论】：

哈哈。！！不知道。但你解决了谢谢