在App.vue中引入vue组件，页面上不显示组件也不报错的问题

最新推荐文章于 2024-10-19 13:55:06 发布

原创最新推荐文章于 2024-10-19 13:55:06 发布 · 1.6w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

Vue.bug 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在Vue应用中遇到的组件不显示的问题，原因是模板缺少包裹元素。解决方案是在最外层添加一个div元素，如`<div><addition></addition></div>`。示例展示了在App.vue中引入并渲染Addition组件的方法，以及Addition.vue组件的定义。通过这个简单的调整，可以确保组件正确显示。

部署运行你感兴趣的模型镜像

如图：两个组件在页面上不显示
在这里插入图片描述

原因：

< template> （将要渲染的HTML）必须是包含在一个标签里面的。

解决：

最外层加个div包起来就行
在这里插入图片描述

代码示例：

在App.vue中引入一个组件
App.vue

<template>
  <div>
    <addition></addition>
    <p>--------------------</p>
  </div>
</template>

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

export default {
  data() {
    return {};
  },
  components: {
    "addition": Addition,
  },
};
</script>

components/Addition.vue

<template>
<div>
  <h3>当前最新的count值为：</h3>
  <button>+1</button>
</div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

您可能感兴趣的与本文相关的镜像