Vue2.0问题总结—在父组件中无法渲染子组件的问题

最近刚入门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(){}
  }
}

最终解决了问题子组件成功渲染出来了：