最近刚入门Vue2.0,准备跟着文档写demo,由于自己的粗心导致出现的一些问题,在这里总结下。
先贴下我的VSCode中Vue快速添加的通用代码模板:
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" };",
" },",
"",
" components: {},",
"",
" computed: {},",
"",
" mounted: {},",
"",
" methods: {}",
"}",
"",
"</script>",
"<style scoped>",
"</style>"
],
"description": "Log output to console"
}
接着写好了几个Vue组件,在相互引用时出现了模板无法渲染的问题,而这里热更新时没有报错,找了半天看是不是引用路径出错了,发现不是这个问题,问题锁定就是没有把子组件引用进来。
最后发现是在父组件中套用的通用Vue的模板中,已经有了components的配置了,我在前面还声明了components,这样导致子组件没有成功引入进来,页面也无法渲染。
<script>
import Item from '../components/children-components/item.vue'
import Tabs from '../components/children-components/tabs.vue'
export default {
components:{ //我在这里还声明了components
Item,
Tabs
},
data () {
return {
todo : {}
};
},
components: {}, //这里又一个components的出现导致了这个bug,但是热更新时无报错
computed: {},
mounted: {},
methods: {
addToDo(){}
}
}
最终解决了问题子组件成功渲染出来了: