时间戳

首页 > 解决方案 > 子组件 HTML 在 VueJS 中不可见

vuejs3 - 子组件 HTML 在 VueJS 中不可见

问题描述

我已经创建了导入到的 Home 组件App.vue

应用程序.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>

头文件.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 在此处输入图像描述

标签： vuejs3

解决方案

使用多字名称。您的组件与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>

主页.vue

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

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

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

您可以在此处Vue 样式指南中找到有关此问题和其他小问题的更多信息

推荐阅读