study
/
vue
/
21th.html

<!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>component|template|slot</title>
    <script src="vue.js"></script>
</head>
<script>
window.onload = function(){

    //方式1，先创建组件构造器，再创建组件
    var myComponent = Vue.extend({
        template:'<h2>hello</h2>'
    });
    Vue.component('hello',myComponent);


    //方式2
    Vue.component('myhello',{
        template:'<h1>my hello2</h1>'
    });

     new Vue({
         el:'#my',
         data:{
             flag:'my-tab',
             flag2:'my-c1'
         },
         methods:{},
         filters:{},
         //方式3 局部组件
         components:{
            'my-address':{
                template:'<h4>局部组件 my-address</h4>'
            },
            //组件引用模板
            'my-address2':{
                template:'#myAddress',
                //组件中带数据,data:function = data{}
                data:function(){
                    return{
                        title:'标题',
                        lists:[1,2,3,4,5]
                    }
                }
            },
            'my-tab':{
                template:'#myTab',
                data:function(){
                    return{
                        tabTitle:["Title1","Title2","Title2"],
                        tabContent:["content1","content2","content3"],
                        cur:1
                    }
                }
            },
            'my-slot':{
                template:'#mySlot',
                data:function(){
                    return{
                        tabTitle:["Title1","Title2","Title2"],
                        tabContent:["content1","content2","content3"],
                        cur:1
                    }
                }
            },
            'my-c1':{
                template:'<h3>my-c1{{x}}</h3>',
                data:function(){
                    return{
                        x:Math.random()
                    }
                }
            },
            'my-c2':{
                template:'<h3>my-c2 {{x}} </h3>',
                data:function(){
                    return{
                        x:Math.random()
                    }
                }
            },
         }
     });
 }
</script>

<!-- 模板，必须有一个根节点 -->
<template id="myAddress">
    <div>
        <!-- 这里的title 取 对应组件的值 -->
        <p>{{title}}</p>
        <ul>
            <li v-for="v in lists">{{v}}</li>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </div>
</template>


<template id="myTab">
    <div>
        <ul>
            <li v-for="v in tabTitle">{{v}}</li>
        </ul>
        <ul>
            <li v-for="v in tabContent">{{v}}</li>
        </ul>
    </div>
</template>

<template id="mySlot">
    <div>
        <p>mySlot</p>
        <slot name="s1"></slot>
        <slot name="s2"></slot>
    </div>
</template>

<my-slot>
        <ul slot="s1">
            <li>s1</li>
            <li>s2</li>
            <li>s3</li>
        </ul>
</my-slot>

<body>
    <div id="my">
        <hello></hello>
        <myhello></myhello>
        <!-- <my-address></my-address> -->
        <my-address2></my-address2>
        <!-- <my-tab></my-tab> -->

        <hr>

        <!--动态模板-->
       <button @click="flag='my-tab'">my-dynanmic-tab</button>
       <button @click="flag='my-address'">my-dynanmic-address</button>

       <my-tab v-if="flag=='my-tab'"></my-tab>
       <my-address v-if="flag=='my-address'"></my-address>

       <!-- <component :is="flag"></component> -->

       <button @click="flag2='my-c1'">my-dynanmic-tab</button>
       <button @click="flag2='my-c2'">my-dynanmic-address</button>
       <!-- <my-c1 v-if="flag2=='my-c1'"></my-c1>
       <my-c2 v-if="flag2=='my-c2'"></my-c2> -->

        <!--不在重新实例化，使用第一次缓存实例化缓存结果-->
       <keep-alive>
            <component :is="flag2"></component>
       </keep-alive>

    </div>
</body>
</html>