摘要：自定義事件自定義事件有能力使子組件事件觸發(fā)父組件中的動(dòng)作。它所做的只是報(bào)告自己的內(nèi)部事件，因?yàn)楦附M件可能會(huì)關(guān)心這些事件。只是這里父組件上的事件功效沒(méi)有雙向綁定中事件那么強(qiáng)大。

自定義事件有能力使子組件事件觸發(fā)父組件中的動(dòng)作。
那么父組件如何監(jiān)聽事件呢？可以使用指令v-on:event-name="callback"監(jiān)聽。
而子組件又是如何觸發(fā)事件的呢？ 很簡(jiǎn)單，調(diào)用this.$emit(eventName)。
先來(lái)個(gè)簡(jiǎn)單例子

new Vue({
    el:"#app-1",
    methods:{
        callback:function(){
            alert("父組件監(jiān)聽到事件觸發(fā)，執(zhí)行回調(diào)。")
        }
    },
    components: {
        "component-1":{
            template:"
                        子組件模板:點(diǎn)擊觸發(fā)自定義事件",
            methods:{
                emitor:function(){
                    console.log("111")
                    this.$emit("alert-event")
                }
            }
        }
    }
})

根據(jù)以上代碼，可以得出個(gè)事件執(zhí)行流程，基本上不管什么自定義事件都是這個(gè)流程

子組件某方法

this.$emit("event")

DOM上v-on監(jiān)聽event

父組件methods中的callback

子組件已經(jīng)和它外部完全解耦了。它所做的只是報(bào)告自己的內(nèi)部事件，因?yàn)楦附M件可能會(huì)關(guān)心這些事件。

在事件執(zhí)行的同時(shí)，子組件還可以在觸發(fā)事件的同時(shí)掛上一些負(fù)載的數(shù)據(jù)，隨著事件傳遞給父組件。
使用API的第二個(gè)參數(shù)this.$emit(event, payload)，具體如下。

new Vue({
    el: "#app-2",
    data: {
        message: ""
    },
    methods: {
        handleMessage: function (payload) {
            this.message = payload.message
        }
    },
    components: {
        "component-2": {
            data: function () {
                return { message: "" }
            },
            template: "
            

                
                發(fā)送
            
",
            methods: {
                sendMsg: function () {
                    this.$emit("message", { message: this.message })
                }
            }
        }
    }
})

點(diǎn)擊發(fā)送按鈕觸發(fā)事件并把信息傳遞給父組件，可以看到還是這里同樣遵循自定義事件流程，其他都是煙霧，之多了個(gè)負(fù)載this.$emit("message", { message: this.message })

通過(guò).native后綴還可以在子組件元素根節(jié)點(diǎn)上綁定原生事件的監(jiān)聽。

new Vue({
    el:"#app-3",
    methods:{
        todo:function(){
            alert("事件回調(diào)方法是父組件中的")
        }
    },
    components:{
        "component-3":{
            template:"原生事件監(jiān)聽"
        }
    }
})

還是要千萬(wàn)注意，回調(diào)方法在父組件作用域上。

可以通過(guò)以下步驟實(shí)現(xiàn)一個(gè)雙向綁定:

在子組件VirtualDOM節(jié)點(diǎn)上，通過(guò)v-bind:prop.sync="foo"進(jìn)行數(shù)據(jù)下發(fā)，這里以.sync修飾符標(biāo)注，通知父組件子組件需要進(jìn)行props的更新。

子組件通過(guò)this.$emit("update:prop",newValue)通知父組件自己需要把prop更新為一個(gè)新值newValue（以子組件的data選項(xiàng)作為過(guò)渡變量）

父組件會(huì)監(jiān)聽這個(gè)更新事件，從而在負(fù)載上拿到newValue，更新foo的數(shù)據(jù)，并把新數(shù)據(jù)重新下發(fā)給子組件的prop

注意：這里并不是子組件props值的改變引發(fā)父組件數(shù)據(jù)的改變，而是利用子組件的data做橋梁，通過(guò)事件及其負(fù)載引起父組件的變動(dòng)。

new Vue({
    el: "#app-4",
    data: { parentMsg: "parent"s message" },
    components: {
        "component-4": {
            props: ["child_msg"],
            data: function () {
                return { inputText: this.child_msg }
            },
            template: "
                

                    
                
",
            watch: {
                child_msg: function (val) {
                    this.inputText = val
                },
                inputText: function (val) {
                    this.$emit("update:child_msg", val)
                }
            }
        }
    }
})

父、子組件各包含一個(gè)輸入框，并且將它們綁定到自己的某data屬性上。watch子組件的該data屬性，一有輸入就觸發(fā)事件通知父組件，并payload新值。父組件通過(guò)payload更新自己的data，并通過(guò)prop將新值下發(fā)給子組件，子組件watch自己的prop，prop一旦變動(dòng)，將新變動(dòng)賦給data。

我們?cè)谟幂斎肟驎r(shí)，會(huì)用v-model進(jìn)行雙向綁定。

等價(jià)于

具體行為：① 在input的value屬性上引用組件的data ② 發(fā)生oninput事件時(shí)，更新組件data，從而更新value。

new Vue({
    el:"#app-6",
    data:{
        message:"Hello"
    }
})

    
    
    
{{message}}

前提:

等價(jià)于

new Vue({
    el: "#app-7",
    data: {
        price: 100
    },
    components: {
        "component-7": {
            props: ["value"],
            template: "
                

                    
                    
                    
子組件Prop：【{{value}}】
                
",
            methods:{
                updateValue:function(value){
                    value = value+"-"
                    this.$emit("input",value)
                }
            }
        }
    },
    
})

    
    
        

            父組件數(shù)據(jù)：【{{price}}】
        
    

這里的流程，輸入框輸入時(shí)，觸發(fā)子組件上input事件并執(zhí)行updateValue方法，方法參數(shù)為輸入框中的value（通過(guò)$emit.target.value獲?。?，方法可以先對(duì)value進(jìn)行一系列加工處理形成super_value，最后使用this.$emit("input",super_value)觸發(fā)父組件在子組件節(jié)點(diǎn)上監(jiān)聽的input事件，并將加工過(guò)的super_value負(fù)載在事件上。父組件@input="price = arguments[0]"中的arguments[0]即是這個(gè)super_value，父組件通過(guò)input的回調(diào)更新自己的data，在將data下發(fā)給子組件的value特性。

這里如果使用v-model指令，那么子組件特性value、父組件監(jiān)聽的事件input及其回調(diào)price = arguments[0]， 這些都是固定的，不能變化。

此示例的執(zhí)行流程其實(shí)與雙向綁定（.sync修飾符與update事件）中的例子是一樣的。
只是這里父組件上的input事件功效沒(méi)有雙向綁定中update事件那么強(qiáng)大。

在輸入框組件中已經(jīng)說(shuō)過(guò)v-model的種種限制，其中最主要的兩點(diǎn)，下發(fā)的組件特性必須命名為value和父組件監(jiān)聽的只能綁定事件input，不靈活， 例如在checkbox中，我要給下發(fā)的特性取名為checked代替value，并且父組件不想監(jiān)聽@input事件，而是@change事件。

為了解決這個(gè)不靈活的問(wèn)題，可以在組件model選項(xiàng)設(shè)置prop和event，如下

new Vue({
    el: "#app-9",
    data: {
        isChecked: false,
        message:"please choose this box"
    },
    components: {
        "component-9": {
            model: {
                prop: "checked",
                event: "change"
            },
            props:{
                checked:Boolean,
                value:String
            },
            template: "
",
            methods:{
                choose:function(checked){
                    this.$emit("change",checked)
                }
            }
        }
    }
})

    
        特性`value`現(xiàn)在從v-model綁定中解放出來(lái)了,可自定義使用