Detailed explanation of vue parent-son template nesting cases

//Define the template mount point my-component<div > 
  <com-ponent></com-ponent>
</div>
<script src="../vue/node_modules/vue/dist/"></script>
<script> 
  var Component = ({// Definition  template: '<div>A custom component!</div>',
  data: function () {
    return {
      name: 'yuxie' 
    }
  }
});
('com-ponent', Component);// register//Note that extend(json) and ('com-ponent', json)//The two JSONs are equal.//So the second type below will omit the extend() function and directly define it in the component, and the system will automatically call the extend function.  var conp = new Vue({// Create a root instance    el: '#exampleBox1' 
   });
</script>

<!-- Parent component template -->
<div  style="border:1px solid #ccc;width:500px;">
  <div>{{}}</div>
  <!--Template mounting logo-->
  <children></children>
</div>
<!-- Subcomponent template -->
<template > 
  <p style="background:#eee;">{{text}}</p>
</template>
<script> 
('children', {//child is the tag name of the template mounted   template: '#child-template',//id corresponds to the ID of the child component   data: function () {      
     return {        
       text: 'This is the content of the child component'      
     }    
   }  
});  
var parent = new Vue({// Initialize the parent component    el: '#exampleBox2',    
    data: {      
      parent: {        
         name:'This is the content of the parent component'      
      }      
     }  
 })
</script>

<div >
  <!--  All template pendants，All must be in the root instanceIDinternal，Otherwise, the pendant cannot be found  -->
  <my-component></my-component>
  <!-- The template can be reused multiple times ···· But there is no need for the same thing -->
  <child></child>Reuse once
  <child></child>Reuse twice
  <child></child> ···
  <child></child> ···
</div>
<!--For example, it's not found here-->
<child></child>
<script src="../vue/node_modules/vue/dist/"></script>
<script>
//Define child components, the child components must be defined before the parent component.var Child = ({template: '<div>A child component!</div>'}); 
//Define parent componentvar Parent = ({
  template: '&lt;div style="border: 1px solid #ccc;width:200px;">Parent<child-component></child-component>Inside the parent template</div>',     components: {
       // Call child components       'child-component': Child 
     } 
  }); 
  // Register the parent component  ('my-component', Parent);
  //Multiple subcomponents.  ('child', Child); 
  // Create a root instance, all components need to be created before the root instance.  new Vue({ 
    el: '#example' 
  })
&lt;/script&gt;