Vue.component 组件无法正常运行，请求排查问题原因

嘿，我一眼就瞅出问题啦！你的todo-item组件没法正常渲染，核心原因是组件注册的时机不对。

具体问题分析 #

你现在的代码是先创建了Vue实例（new Vue(...)），然后才去注册全局组件todo-item。但Vue实例在初始化挂载到#app节点的时候，根本还不知道有todo-item这个组件存在，自然就没法解析这个自定义标签啦。

修正后的代码 #

只要把全局组件的注册代码移到Vue实例创建之前就行：

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p>{{ message }}</p>
  <ol>
    <!-- 创建todo-item组件实例 -->
    <todo-item></todo-item>
  </ol>
</div>

<script>
// 先注册全局组件
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

// 再创建Vue实例
var a = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

额外小提示 #

如果之后你想用局部组件（只在特定实例中可用），可以把组件定义放在Vue实例的components选项里，这样就不用管顺序啦，比如：

var a = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    'todo-item': {
      template: '<li>This is a todo</li>'
    }
  }
})

内容的提问来源于stack exchange，提问作者LittleFunny