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

定義元件

• 全域性定義，在所有例項中都可以使用這個元件

<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'};
            }
        }
    }
})
1、子元件不能直接使用父元件的資料
2、子元件可以宣告自己的資料

元件之間的資料傳遞

1、每個元件是沒關係的，都應該產生自己的資料。在元件中data使用的方法和預設的vm一樣。只是data不再是物件而是函式。元件可以無限巢狀。
2、宣告元件的名字，不能為已經存在的標籤
3、元件的巢狀，子元件必須寫在父組建的模板中才能使用
 

• 1、父級向子級傳遞資料（傳遞的屬性值）

1、如果直接寫a='b'格式傳遞的是字串，動態資料獲取用的是v-bind，一般無論是動態還是靜態，我們都會採用:。
2、:msg='meat',meat是變數;msg='meat',meat是字串，:msg="'meat'",meat是字串
3、子級不能直接改變父級的資料，如果要修改可以將父級的資料修改後賦值給子級的變數，可以使用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：

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

• 2、子級向父級傳遞資料（藉助於事件）

1、子級$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'
                    }
                }
            }
        }

    })