摘要：自定義事件自定義事件有能力使子組件事件觸發父組件中的動作。它所做的只是報告自己的內部事件，因為父組件可能會關心這些事件。只是這里父組件上的事件功效沒有雙向綁定中事件那么強大。

自定義事件有能力使子組件事件觸發父組件中的動作。
那么父組件如何監聽事件呢？可以使用指令v-on:event-name="callback"監聽。
而子組件又是如何觸發事件的呢？ 很簡單，調用this.$emit(eventName)。
先來個簡單例子

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

根據以上代碼，可以得出個事件執行流程，基本上不管什么自定義事件都是這個流程

子組件某方法

this.$emit("event")

DOM上v-on監聽event

父組件methods中的callback

子組件已經和它外部完全解耦了。它所做的只是報告自己的內部事件，因為父組件可能會關心這些事件。

在事件執行的同時，子組件還可以在觸發事件的同時掛上一些負載的數據，隨著事件傳遞給父組件。
使用API的第二個參數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: "
            

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

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

通過.native后綴還可以在子組件元素根節點上綁定原生事件的監聽。

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

還是要千萬注意，回調方法在父組件作用域上。

可以通過以下步驟實現一個雙向綁定:

在子組件VirtualDOM節點上，通過v-bind:prop.sync="foo"進行數據下發，這里以.sync修飾符標注，通知父組件子組件需要進行props的更新。

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

父組件會監聽這個更新事件，從而在負載上拿到newValue，更新foo的數據，并把新數據重新下發給子組件的prop

注意：這里并不是子組件props值的改變引發父組件數據的改變，而是利用子組件的data做橋梁，通過事件及其負載引起父組件的變動。

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)
                }
            }
        }
    }
})

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

我們在用輸入框時，會用v-model進行雙向綁定。

等價于

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

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

    
    
    
{{message}}

前提:

等價于

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)
                }
            }
        }
    },
    
})

    
    
        

            父組件數據：【{{price}}】
        
    

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

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

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

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

為了解決這個不靈活的問題，可以在組件model選項設置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`現在從v-model綁定中解放出來了,可自定義使用