在Vue中使用EventBus，你应该知道这些细节！__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

大家或许都听说EventBus,或者说或多或少都了解过，他可以在任何两个组件中进行传值，不局限于父子、祖孙或是兄弟组件，也可以说他是一种发布——订阅的设计模式。

但您是否真正的会熟练的使用他吗？

本文将把一个例子拆分步骤，让读者能真的明白EventBus到底如何使用！

我将使用拆分为五个步骤：创建、引入、监听、递交、销毁

1.创建

Vue中自带EventBus，不需要额外任何使用插件

只需要new一个「vue实例」

像这样~

// 创建一个EventBus.js文件

import Vue from 'vue' // 引入vue

const EventBus = new Vue() // 创建实例

export default EventBus // 导出

2.引入

引入的方式有两种

① 使用import引入

这个方法特别需要注意的是应该引入 同一个实例

import EventBus from '../EventBus'

② 使用Vue原型链引入

如果您和我一样用的是 vue-cli 脚手架

可以直接在Vue的原型链上添加全局方法

// 在 src 的 main.js 中，加上以下代码 

// 引入第一步创建好的 EventBus
import EventBus from './EventBus'

// 这个方式可以在任何组件里直接用 this.$EventBus 调用
Vue.prototype.$EventBus = EventBus

// 也可以直接这样使用，不需要第一步的创建
// import Vue from 'vue'
// Vue.prototype.$EventBus = new Vue()

注意: 两种方法任选其一，本是采用第二种方法

3.监听

要使用监听方法，只要调用EventBus下的$on方法

具体使用如下:

创建 ./a.vue

<template>
  <div>
    <h3>页面A</h3>
    <router-link to="/b">
      跳转B页面
    </router-link>
  </div>
</template>

<script>
export default {
  created () {
    console.log('----A页面监听事件----')
    // 使用Vue原型链引入
    this.$EventBus.$on('getNum', (num) => {
      console.log('num', num)
    })
  }
}
</script>

4.递交

而接下就是使用递交方法，

同样的，只要调用EventBus下的$emit方法

具体使用如下:

创建 ./b.vue

<template>
  <div>
    <h3>B页面</h3>
    <router-link to="/a">
      跳转A页面
    </router-link>
  </div>
</template>

<script>
export default {
  created () {
    console.log('----B页面递交事件----')
    const num = 2
    // 使用Vue原型链引入
    this.$EventBus.$emit('getNum', num)
  }
}
</script>

读者一定要特别注意！！！

像这样设置路由！

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '../views/a'
import b from '../views/b'

Vue.use(VueRouter)

const routes = [
  {
    path: '/a',
    name: 'a',
    component: a
  },
  {
    path: '/b',
    name: 'b',
    component: b
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

而之后点两个路由跳转

就有以下的效果

5.销毁

细心的读者会发现: 上面输出 num 2 会每次递增 1 次输出

这是因为没有对监听事件销毁，从导致了内存泄露

应该在调用 <svg xmlns="http://www.w3.org/2000/svg" role="img" focusable="false" viewbox="0 -750 25511.7 955" aria-hidden="true" style="vertical-align: -0.464ex; width: 57.719ex; height: 2.161ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mi"><path data-c="6F" d="M201 -11Q126 -11 80 38T34 156Q34 221 64 279T146 380Q222 441 301 441Q333 441 341 440Q354 437 367 433T402 417T438 387T464 338T476 268Q476 161 390 75T201 -11ZM121 120Q121 70 147 48T206 26Q250 26 289 58T351 142Q360 163 374 216T388 308Q388 352 370 375Q346 405 306 405Q243 405 195 347Q158 303 140 230T121 120Z"/></g><g data-mml-node="mi" transform="translate(485, 0)"><path data-c="6E" d="M21 287Q22 293 24 303T36 341T56 388T89 425T135 442Q171 442 195 424T225 390T231 369Q231 367 232 367L243 378Q304 442 382 442Q436 442 469 415T503 336T465 179T427 52Q427 26 444 26Q450 26 453 27Q482 32 505 65T540 145Q542 153 560 153Q580 153 580 145Q580 144 576 130Q568 101 554 73T508 17T439 -10Q392 -10 371 17T350 73Q350 92 386 193T423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 180T152 343Q153 348 153 366Q153 405 129 405Q91 405 66 305Q60 285 60 284Q58 278 41 278H27Q21 284 21 287Z"/></g><g data-mml-node="mo" transform="translate(1362.8, 0)"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">方</text><text data-variant="normal" transform="translate(1010.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">法</text><text data-variant="normal" transform="translate(2020.6, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">（</text></g><g data-mml-node="mi" transform="translate(4671.4, 0)"><path data-c="61" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"/></g><g data-mml-node="mo" transform="translate(5200.4, 0)"><path data-c="2E" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z"/></g><g data-mml-node="mi" transform="translate(5645.1, 0)"><path data-c="76" d="M173 380Q173 405 154 405Q130 405 104 376T61 287Q60 286 59 284T58 281T56 279T53 278T49 278T41 278H27Q21 284 21 287Q21 294 29 316T53 368T97 419T160 441Q202 441 225 417T249 361Q249 344 246 335Q246 329 231 291T200 202T182 113Q182 86 187 69Q200 26 250 26Q287 26 319 60T369 139T398 222T409 277Q409 300 401 317T383 343T365 361T357 383Q357 405 376 424T417 443Q436 443 451 425T467 367Q467 340 455 284T418 159T347 40T241 -11Q177 -11 139 22Q102 54 102 117Q102 148 110 181T151 298Q173 362 173 380Z"/></g><g data-mml-node="mi" transform="translate(6130.1, 0)"><path data-c="75" d="M21 287Q21 295 30 318T55 370T99 420T158 442Q204 442 227 417T250 358Q250 340 216 246T182 105Q182 62 196 45T238 27T291 44T328 78L339 95Q341 99 377 247Q407 367 413 387T427 416Q444 431 463 431Q480 431 488 421T496 402L420 84Q419 79 419 68Q419 43 426 35T447 26Q469 29 482 57T512 145Q514 153 532 153Q551 153 551 144Q550 139 549 130T540 98T523 55T498 17T462 -8Q454 -10 438 -10Q372 -10 347 46Q345 45 336 36T318 21T296 6T267 -6T233 -11Q189 -11 155 7Q103 38 103 113Q103 170 138 262T173 379Q173 380 173 381Q173 390 173 393T169 400T158 404H154Q131 404 112 385T82 344T65 302T57 280Q55 278 41 278H27Q21 284 21 287Z"/></g><g data-mml-node="mi" transform="translate(6702.1, 0)"><path data-c="65" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"/></g><g data-mml-node="mo" transform="translate(7445.9, 0)"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">）</text><text data-variant="normal" transform="translate(1010.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">页</text><text data-variant="normal" transform="translate(2020.6, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">面</text><text data-variant="normal" transform="translate(3030.9, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">的</text></g><g data-mml-node="mi" transform="translate(11764.9, 0)"><path data-c="62" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"/></g><g data-mml-node="mi" transform="translate(12193.9, 0)"><path data-c="65" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"/></g><g data-mml-node="mi" transform="translate(12659.9, 0)"><path data-c="66" d="M118 -162Q120 -162 124 -164T135 -167T147 -168Q160 -168 171 -155T187 -126Q197 -99 221 27T267 267T289 382V385H242Q195 385 192 387Q188 390 188 397L195 425Q197 430 203 430T250 431Q298 431 298 432Q298 434 307 482T319 540Q356 705 465 705Q502 703 526 683T550 630Q550 594 529 578T487 561Q443 561 443 603Q443 622 454 636T478 657L487 662Q471 668 457 668Q445 668 434 658T419 630Q412 601 403 552T387 469T380 433Q380 431 435 431Q480 431 487 430T498 424Q499 420 496 407T491 391Q489 386 482 386T428 385H372L349 263Q301 15 282 -47Q255 -132 212 -173Q175 -205 139 -205Q107 -205 81 -186T55 -132Q55 -95 76 -78T118 -61Q162 -61 162 -103Q162 -122 151 -136T127 -157L118 -162Z"/></g><g data-mml-node="mi" transform="translate(13209.9, 0)"><path data-c="6F" d="M201 -11Q126 -11 80 38T34 156Q34 221 64 279T146 380Q222 441 301 441Q333 441 341 440Q354 437 367 433T402 417T438 387T464 338T476 268Q476 161 390 75T201 -11ZM121 120Q121 70 147 48T206 26Q250 26 289 58T351 142Q360 163 374 216T388 308Q388 352 370 375Q346 405 306 405Q243 405 195 347Q158 303 140 230T121 120Z"/></g><g data-mml-node="mi" transform="translate(13694.9, 0)"><path data-c="72" d="M21 287Q22 290 23 295T28 317T38 348T53 381T73 411T99 433T132 442Q161 442 183 430T214 408T225 388Q227 382 228 382T236 389Q284 441 347 441H350Q398 441 422 400Q430 381 430 363Q430 333 417 315T391 292T366 288Q346 288 334 299T322 328Q322 376 378 392Q356 405 342 405Q286 405 239 331Q229 315 224 298T190 165Q156 25 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 114 189T154 366Q154 405 128 405Q107 405 92 377T68 316T57 280Q55 278 41 278H27Q21 284 21 287Z"/></g><g data-mml-node="mi" transform="translate(14145.9, 0)"><path data-c="65" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"/></g><g data-mml-node="mi" transform="translate(14611.9, 0)"><path data-c="44" d="M287 628Q287 635 230 637Q207 637 200 638T193 647Q193 655 197 667T204 682Q206 683 403 683Q570 682 590 682T630 676Q702 659 752 597T803 431Q803 275 696 151T444 3L430 1L236 0H125H72Q48 0 41 2T33 11Q33 13 36 25Q40 41 44 43T67 46Q94 46 127 49Q141 52 146 61Q149 65 218 339T287 628ZM703 469Q703 507 692 537T666 584T629 613T590 629T555 636Q553 636 541 636T512 636T479 637H436Q392 637 386 627Q384 623 313 339T242 52Q242 48 253 48T330 47Q335 47 349 47T373 46Q499 46 581 128Q617 164 640 212T683 339T703 469Z"/></g><g data-mml-node="mi" transform="translate(15439.9, 0)"><path data-c="65" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"/></g><g data-mml-node="mi" transform="translate(15905.9, 0)"><path data-c="73" d="M131 289Q131 321 147 354T203 415T300 442Q362 442 390 415T419 355Q419 323 402 308T364 292Q351 292 340 300T328 326Q328 342 337 354T354 372T367 378Q368 378 368 379Q368 382 361 388T336 399T297 405Q249 405 227 379T204 326Q204 301 223 291T278 274T330 259Q396 230 396 163Q396 135 385 107T352 51T289 7T195 -10Q118 -10 86 19T53 87Q53 126 74 143T118 160Q133 160 146 151T160 120Q160 94 142 76T111 58Q109 57 108 57T107 55Q108 52 115 47T146 34T201 27Q237 27 263 38T301 66T318 97T323 122Q323 150 302 164T254 181T195 196T148 231Q131 256 131 289Z"/></g><g data-mml-node="mi" transform="translate(16374.9, 0)"><path data-c="74" d="M26 385Q19 392 19 395Q19 399 22 411T27 425Q29 430 36 430T87 431H140L159 511Q162 522 166 540T173 566T179 586T187 603T197 615T211 624T229 626Q247 625 254 615T261 596Q261 589 252 549T232 470L222 433Q222 431 272 431H323Q330 424 330 420Q330 398 317 385H210L174 240Q135 80 135 68Q135 26 162 26Q197 26 230 60T283 144Q285 150 288 151T303 153H307Q322 153 322 145Q322 142 319 133Q314 117 301 95T267 48T216 6T155 -11Q125 -11 98 4T59 56Q57 64 57 83V101L92 241Q127 382 128 383Q128 385 77 385H26Z"/></g><g data-mml-node="mi" transform="translate(16735.9, 0)"><path data-c="72" d="M21 287Q22 290 23 295T28 317T38 348T53 381T73 411T99 433T132 442Q161 442 183 430T214 408T225 388Q227 382 228 382T236 389Q284 441 347 441H350Q398 441 422 400Q430 381 430 363Q430 333 417 315T391 292T366 288Q346 288 334 299T322 328Q322 376 378 392Q356 405 342 405Q286 405 239 331Q229 315 224 298T190 165Q156 25 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 114 189T154 366Q154 405 128 405Q107 405 92 377T68 316T57 280Q55 278 41 278H27Q21 284 21 287Z"/></g><g data-mml-node="mi" transform="translate(17186.9, 0)"><path data-c="6F" d="M201 -11Q126 -11 80 38T34 156Q34 221 64 279T146 380Q222 441 301 441Q333 441 341 440Q354 437 367 433T402 417T438 387T464 338T476 268Q476 161 390 75T201 -11ZM121 120Q121 70 147 48T206 26Q250 26 289 58T351 142Q360 163 374 216T388 308Q388 352 370 375Q346 405 306 405Q243 405 195 347Q158 303 140 230T121 120Z"/></g><g data-mml-node="mi" transform="translate(17671.9, 0)"><path data-c="79" d="M21 287Q21 301 36 335T84 406T158 442Q199 442 224 419T250 355Q248 336 247 334Q247 331 231 288T198 191T182 105Q182 62 196 45T238 27Q261 27 281 38T312 61T339 94Q339 95 344 114T358 173T377 247Q415 397 419 404Q432 431 462 431Q475 431 483 424T494 412T496 403Q496 390 447 193T391 -23Q363 -106 294 -155T156 -205Q111 -205 77 -183T43 -117Q43 -95 50 -80T69 -58T89 -48T106 -45Q150 -45 150 -87Q150 -107 138 -122T115 -142T102 -147L99 -148Q101 -153 118 -160T152 -167H160Q177 -167 186 -165Q219 -156 247 -127T290 -65T313 -9T321 21L315 17Q309 13 296 6T270 -6Q250 -11 231 -11Q185 -11 150 11T104 82Q103 89 103 113Q103 170 138 262T173 379Q173 380 173 381Q173 390 173 393T169 400T158 404H154Q131 404 112 385T82 344T65 302T57 280Q55 278 41 278H27Q21 284 21 287Z"/></g><g data-mml-node="mo" transform="translate(18439.6, 0)"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">生</text><text data-variant="normal" transform="translate(1010.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">命</text><text data-variant="normal" transform="translate(2020.6, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">周</text><text data-variant="normal" transform="translate(3030.9, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">期</text><text data-variant="normal" transform="translate(4041.2, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">中</text><text data-variant="normal" transform="translate(5051.5, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">添</text><text data-variant="normal" transform="translate(6061.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.8px" font-family="serif">加</text></g></g></g></svg>off

 // a.vue 添加$off方法，防止内存泄露
 beforeDestroy () {
    console.log('----A页面销毁监听事件----')
    this.$EventBus.$off('getNum')
  }

这样就是完美的使用方式了

读者应该还要注意的是！！！事件顺序：绑定监听事件->递交事件->获取值->销毁监听事件

本文的完整代码如下：

<template>
  <div>
    <h3>页面A</h3>
    <router-link to="/b">
      跳转B页面
    </router-link>
  </div>
</template>

<script>
export default {
  created () {
    console.log('----A页面监听事件----')
    // 使用Vue原型链引入
    this.$EventBus.$on('getNum', (num) => {
      console.log('num', num)
    })
  },
  beforeDestroy () {
    console.log('----A页面销毁监听事件----')
    // 使用Vue原型链引入
    this.$EventBus.$off('getNum')
  }
}
</script>

<template>
  <div>
    <h3>B页面</h3>
    <router-link to="/a">
      跳转A页面
    </router-link>
  </div>
</template>

<script>
export default {
  created () {
    console.log('----B页面递交事件----')
    const num = 2
    // 使用Vue原型链引入
    this.$EventBus.$emit('getNum', num)
  }
}
</script>

总结一下事件流程就是

创建eventBus->引入同一个实例->绑定(订阅)监听事件->递交（发布）事件->销毁监听事件

感谢阅读