TA貢獻1942條經(jīng)驗 獲得超3個贊
先說一個最原始的方法實現(xiàn)
class Dispatcher {
constructor() {
this._event = [];
}
on(eventName, fn) {
var subscription = {
eventName,
callback: fn
};
this._event.push(subscription);
return this;
}
off(eventName, fn) {
this._event = this._event.filter(
subscription => !(subscription.eventName === eventName && (fn ? subscription.callback === fn : true))
);
return this;
}
emit(eventName, ...data) {
this._event.forEach(subscription => {
if (subscription.eventName === eventName) {
subscription.callback(...data);
}
});
return this;
}
}
var leftList = [
{productId: 10006},
{productId: 10031},
{productId: 10016},
{productId: 10017},
];
var leftList = leftList.map((item, index) => ({...item, order: index,}));
var rightList = [];
var dispatch = new Dispatcher();
dispatch.on('select', function(product) {
leftList = leftList.filter(_product => product !== _product);
rightList.push(product);
});
dispatch.on('unselect', function(product) {
rightList = rightList.filter(_product => product !== _product);
leftList.push(product);
});
dispatch.emit('select', leftList[0]);
console.log('leftList: ', [...leftList],'\n', 'rightList', [...rightList]);
dispatch.emit('unselect', rightList[0]);
console.log('leftList: ', [...leftList],'\n', 'rightList', [...rightList]);
然后再說一個比較Vue的，左右兩列應(yīng)該算兄弟組件之間的通信，組件的代碼和視圖的代碼應(yīng)該在兩個js文件。組件的通信可以通過子組建1 -> 父組件 -> 子組建2，但是比較麻煩。
我感覺可以用Vuex了。
舉報