第六章 组件 55 组件-使用components定义私有组件

 <!DOCTYPE html>
 <html lang="en">

   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
     <title>Document</title>
     <!--1.导入Vue的包-->
     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
   </head>

   <body>
       <div id="app">
       <mycom3></mycom3>
       </div>

       <div id="app2">
       <mycom3></mycom3>
       <login></login>
     </div>

   <!-- 在 被控制的 #app 外面，使用 template 元素，定义组件的HTML模板结构 -->
   <template id="tmp1">
     <div>
       <h1>这是通过template 元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
       <h4>好用，不错！</h4>
     </div>
   </template>

   <template id="temp12">
     <h1>这是私有的 login 组件</h1>
   </template>

       <script>
         Vue.component('mycom3',{
           template:'#tmp1'
         })

           //创建 Vue 实例，得到 ViewModel
           var vm =  new Vue({
               el:'#app',
         data:{
           msg:''
         },
         methods:{}
           });

         var vm2 =  new Vue({
           el:'#app2',
           data:{
           msg:''
         },
         methods:{},
         components:{//定义实例内部私有组件的
           login:{
             template:'#temp12'
           }
         },
         })

       </script>
   </body>
 </html>