Vue学习--组件

Vue中的模块化、可重用代码块将页面细分为一个个功能组件，而且组件之间可以嵌套。组件分为全局组件与局部组件，局部组件在实例中进行注册，并且只可以应用于该实例中。

1、 组件的使用流程：

    //1、创建组件构造器
        let overallDiv=Vue.extend({
            template:`
                <div>
                    <p>这是一个全局组件div</p>
                </div>
            `
        });
    //2、注册全局组件
        Vue.component('overall-div',overallDiv);
    //3、实例化,组件只有在实例化的div内才能使用，不可以直接在页面中使用
        let vue=new Vue({
            el:'#app',
            data:{},
        //在实例内注册局部组件，其创建与注册可以合为一步来写
        components:{
            'local-div':{
                template:
                    ` <div>
                            <p>这是一个局部组件div</p>
                      </div>
                    `
            }
        },
        methods:{
        }
        });

    在HTML页面实例化的div中使用组件:

    <div id="app">
        <local-div></local-div>
        <overall-div></overall-div>
    </div>

   

    注意：一些HTML标签对放入其中的标签有限制，这时需要通过is属性将组件转化为你要放入的组件，例如<ul>标签下只能放<li>，这时，你可以使用<li is="my-component">，这样就相当于放入了<my-component>标签。

2、template模板

        组件的模板除了在js中创建外，还可以使用页面中的template创建模板，注意页面中的模板只能有一个根元素，如有多个元素需要包含在一个div内，例如页面body中的模板：   

    <template id="myTmp">
        <div>
            <p>这是页面中的模板</p>
        </div>
    </template>

        在js中通过id号注册模板。

    Vue.component('my-tmp',{
        template:'#myTmp'
    });

3、组件的data

    在组件中使用data必须以函数的形式返回,如果以属性值的形式存在，所有的组件会共享一个属性值，更改其中一个，所有的组件都会收到影响。例如一个统计被点击次数的组件：   

    <template id="myBtn">
        <div>
            <button @click="count++">按钮被点击{{count}}次</button>
        </div>
    </template>    

    Vue.component('my-btn',{
        template:'#myBtn',
        data () {        //以函数返回的方式定义组件使用的data
            return {
                count:0
            };
        }
    });      

    <div id="app">
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>

    在页面中分别点击两个按钮，两个按钮组件的count分别计数，不会互相干扰：

    

4、父子组件

        先创建子组件，然后再父组件内进行注册，就可以在父组件的模板内使用子组件，然后再注册父组件，这样就可以在外部调用包含子组件的父组件了，外部直接使用父组件接口，而不需要知道内部子组件的实现
        注意在外部不能直接使用子组件，因为它只在父组件内进行了注册，外部看不到子组件

    let child1=Vue.extend({
        template:`<div>这是子组件1</div>`
    });
    let child2=Vue.extend({
        template:`<div>这是子组件2</div>`
    });
    Vue.component('parent',{
        components:{
            'c1':child1,
            'c2':child2
        },
        //在父组件内调用子组件
        template:`<div>父组件<c1></c1><c2></c2></div>`
    });

    <div id="app">
        <parent></parent>
    </div>

        结果如图：

        

5、插槽slot

        像生活中的容器一样，slot允许向其中插入标签、组件等内容，而在外部提供一个框子包装起来。slot分为匿名插槽与实名插槽，匿名插槽可以向其中插入任何类型的内容。
        实名slot可以将内容插入指定的插槽内，就像一台电脑的主板，cpu、内存条分别有自己对应的插槽，实名插槽在模板中通过name属性规定插槽的名字，在使用时，通过标签的slot属性指定对应的name，可以将标签插入指定的插槽。

        匿名插槽

    <!--匿名插槽-->
    <template id="anonymousDiv">
        <div  style="width: 20%;">
            <h3>这是插槽头部</h3>
            <slot>插槽默认显示内容</slot>
            <hr/>
            <p>插槽尾部</p>
        </div>
    </template>

    let vue2=new Vue({
        el:'#app2',
        data:{

        },
        components:{
          //绑定匿名插槽
          'anonymous-slot':{
              template:'#anonymousDiv'
          },
          //绑定实名插槽
          'realname-slot':{
              template:'#realnameDiv'
          }
        }
    });

       向cpu插槽内插入内容：

    <div id="app2">
        <anonymous-slot>
            <p>向插槽中插入一段文字</p>
        </anonymous-slot>
    </div>

        插槽未放入内容时：插入一段文字：

   

    实名插槽

    <template id="realnameDiv">
        <div>
            <h3>实名插槽头部</h3>
            <slot name="cpu">这是cpu插槽</slot>
            <slot name="memery">这是内存条插槽</slot>
            <slot name="HardDisk">这是硬盘插槽</slot>
        </div>
    </template>

        <realname-slot>
            <p slot="cpu">Intel Core i5</p>
        </realname-slot>

    结果：cpu放入指定插槽，而其他插槽未受影响：