子组件 HTML 在 VueJS 中不可见

无处不在的开发者

我已经创建了导入到的 Home 组件 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>

标题.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

玩

使用多词名称。您的组件与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 风格指南中找到有关此问题和其他小问题的更多信息

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。