vue 中 觀察者模式，用於子元件向父元件傳遞引數，即子元件 emit自定義一個事件名稱，及其引數，父元件用事件接受即可，事件第一個引數為自定義事件名稱，第二個引數為回撥函式

子元件程式碼為

<template>
    <div>
        <input type="text" v-model="inputVal" @change="sendParams">
    </div>
</template>

<script>
export default {
    data () {
        return {
            inputVal: ''
        }
    },
    methods: {
        sendParams () {
            this.$emit('handlerVal',this.inputVal)
        }        
    }
}
</script>
 

父元件程式碼

<template>
    <div>
        <Child @handlerVal="getData"/>
    </div>
</template>
import Child from 'components/Child'
<script>
    export default {
        data () {
            return {
                inputVal: ''
            }
        },
        methods: {
            getData (data) {
               console.log(data)
            }
        }
    }
</script>
 

很簡單，不用多說，重點來了，vue是怎麼通過自定義事件做這樣的呢？

其實很簡單，只需要在Vue上掛載一個物件，然後這個物件的 key(鍵) 為 自定義事件名稱， value （值）為 自定義事件傳遞的引數。當有了這個思路之後，下面就是具體的落實了，程式碼如下

<script type="text/javascript">
var Event = {
    on: function(eventName,arg) {
        this.handles = this.handles || {};
        this.handles[eventName] = arg || null ;
    },
    emit: function (eventName, cb) {
        if(this.handles[eventName]) {
            cb(this.handles[eventName])
        }
    }
}

Event.on('lcq','haha')
Event.emit('lcq',getData)
function getData(data) {
    console.log(data) // haha
}
</script>
 

其實就是讀寫 Event.handles 這個物件的key和value