簡述
點(diǎn)擊父組件的按鈕時(shí)希望在子組件中捕獲這個(gè)點(diǎn)擊事件砌创，可以利用node自己的EventEmitter虏缸。
解決步驟
-
1、直接引入并新建實(shí)例嫩实，不用額外npm install events --save
直接引入并新建實(shí)例 -
2刽辙、把第一步實(shí)例化的event傳入子組件
傳入子組件 -
3、發(fā)送事件
發(fā)送事件
注意：event.emit方法中可以傳第二個(gè)參數(shù)用來傳值甲献，如下：
event.emit('selectAll', 1);
- 4宰缤、在子組件中監(jiān)聽
-
下面截圖中監(jiān)聽事件中this所指對(duì)象已經(jīng)改變，render方法中的this指組件實(shí)例晃洒，但this.props.event.on方法的回調(diào)函數(shù)中的this指EventEmitter實(shí)例慨灭。
子組件
-
注意：回調(diào)函數(shù)的參數(shù)用來接收父組件發(fā)送過來的值，如下：
this.props.event.on('selectAll', function(value) {
// 參數(shù)value即是父組件傳過來的值球及，即value = 1
});
另：第4步截圖中監(jiān)聽事件中的回調(diào)函數(shù)是匿名形式的寫法氧骤，也可以傳入實(shí)名參數(shù)，如下：
this.props.event.on('selectAll', this.selectAll);
this.props.event.on('cancelAll', this.cancelAll);
需要注意的是吃引，監(jiān)聽事件可以傳入匿名函數(shù)也可以傳入實(shí)名函數(shù)筹陵，但是移除事件的時(shí)候，必須傳入實(shí)名函數(shù)镊尺，傳入匿名函數(shù)會(huì)有錯(cuò)誤
- 5朦佩、移除事件的監(jiān)聽器
componentWillUnmount() {
this.props.event.removeAllListeners('selectAll', this.selectAll);
this.props.event.removeAllListeners('cancelAll', this.cancelAll);
}
這里沒有用removeListener，而是用了removeAllListeners庐氮，這樣更保險(xiǎn)语稠，因?yàn)樵诙啻吻袚Q組件時(shí)，我發(fā)現(xiàn)removeListener并不能很好的移除事件的監(jiān)聽器弄砍。另外觸發(fā)事件是點(diǎn)擊等事件時(shí)颅筋，監(jiān)聽事件最好用once，而不是on输枯。
