Vue中元件傳值$on和$emit的編寫

這是關于實作$on和$emit以及$off的js檔案

因為每次實作這些方法都要執行個體vue，這使一些vue不需要的功能也一起帶進來了，不利于優化。

let callbackMap = {};

export default {
    // 添加事件監聽
    $on: function(eventName, callback){
        // 按名字儲存所有的回調函數

        //1.判斷callbackMap是否儲存過相同的事件
        if(!callbackMap[eventName]){
            callbackMap[eventName] = [];//沒有，就設定一個儲存的容器
        }

        // 2.将callback放在容器中
        callbackMap[eventName].push(callback);

        // console.log(callbackMap);
    },
    // 觸發事件
    $emit: function(eventName, ...rest){
        // 按名字調用儲存的所有的回調函數
        // 1.按照名字取出所有的回調
        let callbackArr = callbackMap[eventName];
        if(!callbackArr){
            return;//沒有監聽的回調
        }
        // 2.一個一個調用回調，并且傳參
        callbackArr.map(callbackItem=>{
            callbackItem(...rest);
        })

    },
    // 移除事件
    $off: function(eventName, callback){
        if(!eventName){
            //移除所有事件監聽
            callbackMap = {};
            return;
        }
        if(eventName && (!callback)){
            //移除指定事件的所有監聽
            callbackMap[eventName] = [];
        }
        if(eventName && callback){
            //移除指定事件的指定的某一個監聽
            //獲得所有的回調
            let callbackArr = callbackMap[eventName];
            // 從數組中删除對應的需要移除的事件
            callbackMap[eventName] = callbackArr.filter(callbackItem=>{
                return callbackItem != callback;
            })
        }
    

    }
           

這個可以建立一個js檔案，然後引入

import center from './center.js'

然後在Vue.prototype.$center = center;即可