摘要：子組件也屬于當(dāng)前實(shí)例。監(jiān)聽鉤子函數(shù)的場景使用的不多，但是還是要知道的。可以獲取到父組件傳遞的除和外的所有自定義屬性。

創(chuàng)建parent和child組件，并在parent中注冊child組件

在父組件調(diào)用子組件標(biāo)簽中添加一個(gè)自定義屬性(msg)，

在子組件的props中將parent中自定義的屬性(msg)添加進(jìn)去,然后就可以像data中定義的屬性一樣使用

在父組件中的子標(biāo)簽中監(jiān)聽該自定義事件(listenChildEvent)并添加一個(gè)響應(yīng)該事件的處理方法(acceptMsgFromChild)

在子組件中創(chuàng)建一個(gè)按鈕，給按鈕綁定一個(gè)點(diǎn)擊事件

在響應(yīng)該點(diǎn)擊事件的函數(shù)(sendMsgToParent)中使用$emit來觸發(fā)父組件的自定義事件(listenChildEvent)，并傳遞一個(gè)參數(shù)

我們在使用別人的組件庫的時(shí)候，經(jīng)常是通過v-model來控制一個(gè)組件顯示和隱藏的效果，例如：彈框，下面一步一步的解開v-model的什么面紗
提到v-model首先想到的就是我們對于表單用戶數(shù)據(jù)的雙向數(shù)據(jù)綁定，操作起來很簡潔很粗暴，例如:

data () {            
    return {                
        msg: ""            
    }        
}

其實(shí)v-model是個(gè)語法糖，上面這一段代碼和下面這一段代碼是一樣的效果：

data () {
    return {
        msg: "" 
    }        
}

由此可以看出，v-model="msg"實(shí)則是 :value="msg" @input="msg = $event.target.value"的語法糖。這里其實(shí)就是監(jiān)聽了表單的input事件，然后修改:value對應(yīng)的值。除了在輸入表單上面可以使用v-model外，在組件上也是可以使用的，這點(diǎn)官網(wǎng)有提到，但是介紹的不是很詳細(xì)，導(dǎo)致剛接觸的小伙伴會有一種云里霧里不知所云的感覺。既然了解了v-model語法糖本質(zhì)的用法，那么我們就可以這樣實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定：

以上原理實(shí)現(xiàn)方法，寫法1：

父組件用法：

子組件寫法：

// 點(diǎn)擊該按鈕觸發(fā)父子組件的數(shù)據(jù)同步
確定

// 接收父組件傳遞的value值
// 注意，這種實(shí)現(xiàn)方法，這里只能使用value屬性名
props: {            
    value: {                
        type: Boolean,                
        default: false            
    }        
},
methods: {            
    confirm () {                
        // 雙向數(shù)據(jù)綁定父組件:value對應(yīng)的值 
        // 通過$emit觸發(fā)父組件input事件，第二個(gè)參數(shù)為傳遞給父組件的值，這里傳遞了一個(gè)false值 
        // 可以理解為最上面展示的@input="msg = $event.target.value"這個(gè)事件
        // 即觸發(fā)父組件的input事件，并將傳遞的值‘false’賦值給msg             
        this.$emit("input", false)            
    }        
}

這種方式實(shí)現(xiàn)了父子組件見v-model雙向數(shù)據(jù)綁定的操作，例如你可以試一下實(shí)現(xiàn)一個(gè)全局彈窗組件的操作，通過v-model控制彈窗的顯示隱藏，因?yàn)槟阋陧撁鎯?nèi)進(jìn)行某些操作將他顯示出來，控制其隱藏的代碼是寫在組件里面的，當(dāng)組件隱藏了對應(yīng)的也要父組件對應(yīng)的值改變。

以上這種方式實(shí)現(xiàn)的父子組件的v-model通信，雖可行，但限制了我們必須popos接收的屬性名為value和emit觸發(fā)的必須為input，這樣就容易有沖突，特別是在表單里面。所以，為了更優(yōu)雅的使用v-model通信而解決沖突的問題，我們可以通過在子組件中使用model選項(xiàng)，下面演示寫法2：
父組件寫法：

子組件寫法：

確定

// model選項(xiàng)用來避免沖突
// prop屬性用來指定props屬性中的哪個(gè)值用來接收父組件v-model傳遞的值
// 例如這里用props中的show來接收父組件傳遞的v-model值
// event：為了方便理解，可以簡單理解為父組件@input的別名，從而避免沖突
// event的值對應(yīng)了你emit時(shí)要提交的事件名，你可以叫aa，也可以叫bb，但是要命名要有意義哦！！！
model: {            
    prop: "show",            
    event: "changed"        
},
props: {
    // 由于model選項(xiàng)中的prop屬性指定了，所以show接收的是父組件v-model傳遞的值            
    show: {                
        type: Boolean,                
        default: false            
    }        
},        
methods: {            
    confirm () {                
        // 雙向數(shù)據(jù)綁定父組件傳遞的值
        // 第一個(gè)參數(shù)，對應(yīng)model選項(xiàng)的event的值，你可以叫aa，bbb，ccc，起名隨你 
        this.$emit("changed", false)            
    }        
}

這種實(shí)現(xiàn)父子組件見v-model綁定值的方法，在我們開發(fā)中其實(shí)是很常用的，特別是你要封裝公共組件的時(shí)候。
最后，實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方式其實(shí)還有.sync，這個(gè)屬性一開始是有的，后來由于被認(rèn)為或破壞單向數(shù)據(jù)流被刪除了，但最后證明他還是有存在意義的，所以在2.3版本又加回來了。

例如：父組件：

data () {
    return {
        msg: ""
    }
}

改變msg值

props: {            
    oneprop: {                
        type: String,                
        default: "hello world"
    }        
},        
methods: {            
    changeMsg () {                
        // 雙向數(shù)據(jù)流
        this.$emit("update:msg", "helow world")           
    }        
}        

這樣，便可以在子組件更新父組件的數(shù)據(jù)。由于v-model只使用一次，所以當(dāng)需要雙向綁定的值有多個(gè)的時(shí)候，.sync還是有一定的使用場景的。.sync是下面這種寫法的語法糖，旨在簡化我們的操作：

掌握了組件的v-model寫法，在封裝一些公共組件的時(shí)候就又輕松一些了吧。
這里再提一下：

m.$emit(event ,[...args])這個(gè)api，其主要作用就是用來觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。子組件也屬于當(dāng)前實(shí)例。第一個(gè)參數(shù)：要觸發(fā)的事件名稱。后續(xù)的參數(shù)可選：即作為參數(shù)傳遞給要觸發(fā)的事件。文檔

監(jiān)聽當(dāng)前實(shí)例上的自定義事件，事件可以有$emit觸發(fā)，也能通過hook監(jiān)聽到鉤子函數(shù)，

vm.$on( event, callback )：一直監(jiān)聽；文檔

vm.$once( event, callback )：監(jiān)聽一次；文檔

vm.$off( [event, callback] )：移除監(jiān)聽；文檔
監(jiān)聽$emit觸發(fā)的自定義事件，上面已經(jīng)有過用法了，監(jiān)聽鉤子函數(shù)，在上面的定時(shí)器那塊也有演示到。監(jiān)聽鉤子函數(shù)的場景使用的不多，但是還是要知道的。

vm.$attrs：可以獲取到父組件傳遞的除class和style外的所有自定義屬性。

vm.$listeners：可以獲取到父組件傳遞的所有自定義事件

例如：父組件:

就可以在子組件中獲取父組件傳遞的屬性和事件，而不用在props中定義。子組件簡單演示如下：

created() {            
    const msg = this.$attrs.msg; // 獲取父組件傳遞的msg
    this.$listeners.confirm && this.$listeners.confirm(); //若組件傳遞事件confirm則執(zhí)行
},

這在我們寫一些高級組件時(shí)候，會有用到的。