vue的組件

• 組件的出現(xiàn)就是為了拆分vue實例中的代碼量的，能夠以不同的組件來劃分不同的功能模塊，需要什么樣的功能就可以調(diào)用相應(yīng)的模塊
• 組件化與模塊化的不同：
  模塊化是從代碼的邏輯的角度進行劃分的，方便代碼分層開發(fā)，保證每個功能模塊的職能單一
  組件化是從UI界面的角度進行劃分的，前端的組件化方便UI組件的重用

創(chuàng)建組件

全局組件

1. 使用Vue.extend來創(chuàng)建全局的vue組件

var com1=Vue.extend({
        template:'<h3>創(chuàng)建組件</h3>'
    })

2. 通過template屬性指定了組件要展示的HTML結(jié)構(gòu)
3. Vue.component('組件的名稱',創(chuàng)建出來的組件模板對象)

Vue.component('myCom1',com1)

4. 使用組件,直接把組件的名字以HTML標簽的形式引入頁面中，使用駝峰命名大寫字母改小寫中間加-，不使用駝峰命名直接使用原名稱

<my-com1></my-com1>

5. 不使用中間變量直接創(chuàng)建組件

Vue.component('myCom1',Vue.extend({
        template:'<h3>創(chuàng)建組件</h3>'
    }))

6. 直接使用Vue.component創(chuàng)建組件

 Vue.component('myCom1',{
        template:'<h3>創(chuàng)建組件</h3>'
    })

7. 不論用哪種方式創(chuàng)建出來的組件，組建的template屬性指向的模板內(nèi)容必須有唯一的根元素
8. 在被控制的div外面使用template定義組建的HTML模板結(jié)構(gòu)然后在被控制的div中使用

<mycom3></mycom3>

<template id="tmp1">
        <div>
            <h1>在外部定義組件結(jié)構(gòu)</h1>
            <h2>有代碼提示和高亮</h2>
        </div>
    </template>


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

私有組件

1. 定義實例內(nèi)部私有組件

components:{
                    login:{
                        template:'<h3>私有組件</h3>'
                    }
                }

2. 組件可以有自己的data屬性，組建的data和實例中的data不一樣，實例中的data可以為一個對象，但組件的data必須是一個方法
3. 組件中的data除了必須為一個方法之外，這個方法內(nèi)部必須返回一個對象才行，組件中的data使用方式和實例中的data完全一樣

components:{
                    login:{
                        template:'<h3>私有組件---{{msg}}</h3>',
                        data:function(){
                            return{
                                msg:'組件中data定義的數(shù)據(jù)'
                            }
                        }
                    }
                }

組件切換

1. v-if ，v-else切換組件，缺陷只能在兩個組件之間切換

Vue.component('login',{
        template:'<h3>登錄組件</h3>',
        
    })  
    Vue.component('register',{
        template:'<h3>注冊組件</h3>',
        
    })

<button @click.prevent="flag=true">登錄</button>
<button @click.prevent="flag=false">注冊</button>

        <login v-if="flag"></login>
        <register v-else="flag"></register>

2. compon是一個占位符， ：is屬性可以用來指定用來指定要展示組件的名稱

<button @click="comName='login'">登錄</button>
<button @click="comName='register'">注冊</button>
<component :is="comName"></component>

data:{  
          comName:'register'
        },

3. 應(yīng)用切換動畫 和mode方式，切換時當(dāng)組件消失動畫完全消失時才會開始組件開始動畫

<transition mode="out-in">
<component :is="comName"></component>
</transition>

<style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
        </style>

父組件向子組件傳值

1. 父組件可以在引用子組件的時候通過屬性綁定（v-bind:）的方式，把需要傳遞給子組件的數(shù)據(jù)傳遞到子組件內(nèi)部供其使用

components:{
                    com1:{
                        template:'<h2>這是子組件----{{parentmsg}}</h2>',
                        props:['parentmsg']
                    }
                }   

        <com1 v-bind:parentmsg='msg'><com1>

2. props把父組件傳遞過來的parentmsg屬性先在props數(shù)組中定義才能使用這個數(shù)據(jù)
3. 父組件向子組件傳遞方法通過事件綁定（v-on:）的方式