Vue基礎知識之組件及組件之間的數據傳遞（五）

vue中的組件是自定的標籤，能夠擴展的原生html元素，封裝可複用的代碼
note：
一、在標籤命中不要使用大寫，標籤名字必須用短橫線隔開
二、模板中只能有一個根元素，不能使用並列標籤。

定義組件

• 全局定義，在全部實例中均可以使用這個組件

<template id='hello'>
    <div>
        <div>hello</div>
        <div>world</div>
    </div>
</template>
let data={msg:'world'}
Vue.component('myComponent',{
template:'#hello',//經過模板的ID來引用這個組件
return {msg:'world'};//此時不能return data；這樣會致使若是有多個實例運用這個組件會致使，三者共享同一個data，改變其中一個，會致使其餘的都改變。對象變量會致使共享數據。
    })
此時就能夠在實例中使用my-component標籤。

• 局部定義

let vm=new Vue({
    el:'#app',
    data:{msg:'hello'},
    components:{
        'my-component'(myComponent):{
        template:'<h1>{{msg}}</h1>',
        data(){
            return {msg:'world'};
            }
        }
    }
})
一、子組件不能直接使用父組件的數據
二、子組件能夠聲明本身的數據

組件之間的數據傳遞

一、每一個組件是不要緊的，都應該產生本身的數據。在組件中data使用的方法和默認的vm同樣。只是data再也不是對象而是函數。組件能夠無限嵌套。
二、聲明組件的名字，不能爲已經存在的標籤
三、組件的嵌套，子組件必須寫在父組建的模板中才能使用

• 一、父級向子級傳遞數據（傳遞的屬性值）

一、若是直接寫a='b'格式傳遞的是字符串，動態數據獲取用的是v-bind，通常不管是動態仍是靜態，咱們都會採用:。
二、:msg='meat',meat是變量;msg='meat',meat是字符串，:msg="'meat'",meat是字符串
三、子級不能直接改變父級的數據，若是要修改能夠將父級的數據修改後賦值給子級的變量，可使用data或者computed

<div id=app>
    <child :data='aaa' :data1="bbb"></child>
    //此處，在子組件中左邊的是子組件的接收,用props接收,若是是放在數組中每一項就是一個字符串,右邊是從父級傳遞的數據。
</div>
<script>
    let vm=new Vue({
            el:'#app',
            data:{
            aaa:'xxxxx',
            bbb:'yyyyy'
            }
            components:{//
                child:{
                props:['data','data1']，
                template:'<div>{{msg}}</div>',
                data(){
                    return {msg:this.data+'zxvv'}
                    }，
                computed：{
                    msg:{
                        get(){
                        return  this.data+'zxvv'
                            }
                        }
                    }
                }   
            }
        })
</script>

props中的validate：

一、props：['xx','yy','zz'];
二、props：{
    aa:{
        type:[Number,String],//選擇值得類型符不符合要求
        default:'acac',//默認值
        validator(val){//校驗函數
            return val>200//返回false，校驗失敗。
        }
        required：true，//表明屬性必須填     
    }
}

• 二、子級向父級傳遞數據（藉助於事件）

一、子級$emit後會觸發本身身上的某一個自定的方法，這個方法對應的函數在父級的身上。

<div id="app1">
    {{datas}}
    <child @get-data="getData"></child>//自定義方法寫在本身身上，右邊的是父級對應方法的函數
</div>
let vm1 = new Vue({
        el: '#app1',
        data: {
            datas: '',//用來接收本身傳遞的空數據
        },
        methods: {
            getData(msg){//接受的參數就是從子級傳遞過來的數據
                this.datas = msg;
            }
        },
        components: {
            child: {
                template: `<div><button @click="say">{{msg}}</button></div>`,//綁定觸發事件
                methods: {
                    say(){//觸發事件，以及自定義方法
                        this.$emit('get-data', this.msg);//這裏的this指的是當前子組件
                    }
                },
                data(){
                    return {
                        msg: 'xxx'
                    }
                }
            }
        }

    })

• 三、兄弟之間傳遞數據

一、兄弟之間傳遞數據須要藉助於事件車，經過事件車的方式傳遞數據eventBus
二、建立一個Vue的實例，讓各個兄弟共用同一個事件機制。
三、傳遞數據方，經過一個事件觸發bus.$emit(方法名，傳遞的數據)。
四、接收數據方，經過mounted(){}觸發bus.$on(方法名，function(接收數據的參數){用該組件的數據接收傳遞過來的數據})，此時函數中的this已經發生了改變，可使用箭頭函數。

slot

具名slot，經過組件傳入模板，每一個模板指定是slot名字，這個名字和定製模板匹配到，會替換定製的模板。
slot是vue中提供的一個標籤，用來作模板定製的。屬性，事件，定製模板組成了組件的API。
**使用slot分發內容**
爲了讓組件能夠組合，咱們須要一種防暑混合父組件的內容與子組件本身的模板。這個過程被稱做內容分發（transclusion），vue.js實現了一個內容分發API，使用特殊的<slot>元素做爲原始內容的插槽。
**編譯做用域**
 父組件模板的內容在父組件做用域內編譯；子組件模板的內容在子組件做用域內編譯。
 **單個slot**
 除非子組件模板包含至少一個 <slot> 插口，不然父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片斷將插入到 slot 所在的 DOM 位置，並替換掉 slot 標籤自己。
 最初在 <slot> 標籤中的任何內容都被視爲備用內容。備用內容在子組件的做用域內編譯，而且只有在宿主元素爲空，且沒有要插入的內容時才顯示備用內容。
 **具名slot**
 <slot>元素能夠用有個特殊的屬性name來配置如何分發內容。多個slot能夠有不一樣的名字。具名slot將匹配內容片斷中對應slot特性的元素。但任然能夠有一個匿名slot，它是默認的slot，做爲找不到匹配的內容片斷的備用插槽。若是沒有默認的slot，這些找不到匹配的內容將被拋棄。

遞歸組件

組件在它的模板內能夠遞歸地調用本身。recursive 遞歸組件，本身調用本身，必須有中斷條件。
默認狀況下，遞歸組件是不會執行的，要制定name屬性(只在局部組件中須要添加)，全局逐漸不須要加name屬性。

動態組件

is能夠指定當前標籤內能夠指定插入什麼元素,能夠防止解析出錯。
radio中默認沒有綁定數據，要給value值，這個value值會映射到radio上

<keep-alive>
    <component :is="rad"></component><!--緩存組件的上一次狀態,防止每次切換時都須要渲染組件-->
</keep-alive>