vue 組件

時間 2019-12-10

標籤 vue 組件简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>vue組件詳解</title>
   <script src='vue.js'></script>
</head>
<body>

   <script>
      // 全局組件
      // Vue.component('my-hello',{
      //        template:'<h1>hellow word!</h1>'
      // })

          window.onload=function(){
             new Vue({
                el:"#my",
                data:{
                   title:'子調父'   ,
                   flag:'aa'
                },

                // 局部組件
                components:{

                   'my-slot':{
                       template:'#myslot',
                       props:['name'],
                       data(){
                            return{
                                age:12
                            }
                       }
                       // directive:{
                       //    focus:{
                       //        inserted(el){
                       //            el.focus();
                       //        }
                       //    }
                       // }

                   },
                   'aa':{
                       template:'<h1>num:{{x}}</h1>',
                       data(){
                           return{
                               x:Math.random()
                           }
                       }
                   }
                }

              })
          }

   </script>


   <template id='myslot'>
           <div>

            <p>{{age}}</p>
            <p>{{name}}</p>
            <slot name='s1'></slot>
            
           <input type="text" >
           </div>

   </template>

       <div id='my'>
      
          


             <my-slot :name='title'>

                
                   <ul slot='s1'>
                     <li>dddd</li>
                  </ul>
             </my-slot>


             <button @click="flag='my-slot'">my-slot</button>
             <button @click="flag='aa'">aa</button>
             
           

           
               <keep-alive>

               
              <component :is="flag"></component>
             </keep-alive>
      </div>
</body>
</html>html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。