如图:两个组件在页面上不显示
原因:
< 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>