[JavaScript知识库]子组件无法正常显示

1. 错误形式：父组件中引用了子组件，但是子组件没有正常显示

2. 编码环境：在html页面中通过cdn的方式进行引入，采用vue基础语法进行编写，父组件与子组件在同一个页面中编码，同时子组件的注册也在当前页面

3. 错误代码：

   <div id="app">
       // 使用子组件
       <to-item v-bind:todo="message"></to-item>
   </div>
   // 引入vue
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <script>
       // 创建根组件的Vue实例
       const vue = new Vue({
           el: '#app',
           data: {
               message: '页面加载于' + new Date().toLocaleString(),
               seen: true
           }
       })
   	// 子组件注册
       Vue.component('to-item', {
           props: ['todo'],
           template: '<span>{{ todo }}</span>'
       })
   </script>
   

4. 解决：将子组件的注册代码放在创建根组件Vue实例的代码之前

   <div id="app">
       <to-item v-bind:todo="message"></to-item>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <script>
       Vue.component('to-item', {
           props: ['todo'],
           template: '<span>{{ todo }}</span>'
       })
   
       const vue = new Vue({
           el: '#app',
           data: {
               message: '页面加载于' + new Date().toLocaleString(),
               seen: true
           }
       })
   </script>
   

5. 问题原因：

   如果是原来的错误代码放置代码的位置的话，由于代码从上往下进行编码，先会对第一个创建的Vue实例进行编译，编译当编译到to-item这个标签的时候，从已有注册的Vue实例中（一个组件本质上是一个拥有预定义选项的一个 Vue 实例），未找到to-item这个组件，所以会作为错误处理。