vue親子テンプレートネストケース

親子テンプレートの呼び出しです
ここではvue 1に対する針である.0,2.0を学ぶなら、公式ドキュメントvue 2を見ることをお勧めします.0 http://vuefe.cn/guide/vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html
次の記事では、webpackとvueを組み合わせて、コンポーネントを一つのファイルに書くことはできないでしょう.
1つ目は、サブコンポーネントのテンプレートがjsに直接書かれていることです.

//       my-component
 
    


 
   var Component = Vue.extend({//   
    template: '<div>A custom component!</div>',
    data: function () {
        return {
            name: 'yuxie' 
       }
    }
});
Vue.component('com-ponent', Component);//    
//  ，extend(json)     vue.component('com-ponent', json)//   JSON    。
//         extend()     ，   component   ，       extend  。
    var conp = new Vue({//      
        el: '#exampleBox1' 
     });

2つ目は、HTMLテンプレートを使用する

    
{{parent.name}}
    
    



 
Vue.component('children', {//child                
     template: '#child-template',//id      ID        
      data: function () {            
          return {                
              text: '         '            
          }        
      }    
});    
var parent = new Vue({//               
        el: '#exampleBox2',        
        data: {            
            parent: {               
                 name:'         '            
            }            
         }   
 })

3つ目は複雑な

    
    
    
        
        
      ···
      ···





//     ，             。    
var Child = Vue.extend({template: '<div>A child component!</div>'}); 
//     
var Parent = Vue.extend({
    template: '<div style="border: 1px solid #ccc;width:200px;">Parent<child-component></child-component>     </div>', 
         components: {
              //       
             'child-component': Child 
         } 
   }); 
   //       
   Vue.component('my-component', Parent);
    //     。
    Vue.component('child', Child); 
   //      ，               。
    new Vue({ 
       el: '#example' 
   })