vue的$on,$emit的使用

vue中使用 $emit(eventName) 觸發事件，使用 $on(eventName) 監聽事件

 

  $emit(eventName)  觸發當前實例上的事件，附加參數都會傳給監聽器回調。

 $on(eventName) 監聽當前實例上的自定義事件。事件可以由 vm.$emit 觸發。回調函數會接收所有傳入事件觸發函數的額外參數。

 

下面通過幾個實例來演示一下怎么使用

實例1  本頁面單個事件

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">點擊</el-button>
  </section>
</template>

<script> export default { methods: { isClick() { this.$emit('isLeft', '點擊事件！'); } }, mounted() { this.$on('isLeft', (val) => { console.log(val); }); } } </script>

以上代碼，是通過按鈕的點擊事件，然后this.$emit傳遞事件，然后this.$on捕獲本頁面的事件

 

 

 

實例2 本頁面多個事件

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">點擊</el-button>
    <el-button type="primary" @click="isClickOther">點擊</el-button>
  </section>
</template>

<script> export default { methods: { isClick() { this.$emit('isLeft', '點擊事件！'); }, isClickOther() { this.$emit('isRight', ['點擊1', '點擊2']); } }, mounted() { this.$on('isLeft', (val) => { console.log(val); }); this.$on('isRight', (...val) => { console.log(val); }); this.$on(['isLeft', 'isRight'], () => { console.log(666); }); } } </script>

以上例子，是本頁面的兩個點擊事件，可以同時監聽兩個事件，也可以同時傳多個參數

 

實例3  非父子組件傳值（通過bus傳值）

子組件1

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">點擊</el-button>
  </section>
</template>

<script> import eventBus from '~/utils/eventBus'; export default { methods: { isClick() { eventBus.$emit('isLeft', '點擊事件！'); } } } </script>

子組件2

<template>
  <section>
    <h1>right</h1> {{ name }} </section>
</template>

<script> import eventBus from '~/utils/eventBus'; export default { data() { return { name: 'right默認值' }; }, mounted() { eventBus.$on('isLeft', (info) => { this.name = info ; }); } } </script>

父組件

<template>
  <section>
    <el-row>
      <el-col :span="12">
        <left/>
      </el-col>
      <el-col :span="12">
        <right />
      </el-col>
    </el-row>
  </section>
</template>

<script> import left from '~/components/left' import right from '~/components/right' export default { components: { left, right } } </script>

 

以上例子就是 left組件傳值給bus，然后right組件監聽bus的isLest事件，當left組件觸發事件的時候，right組件就會觸發方法，替換頁面的值

 

總結

1.使用$emit傳遞事件

2.使用$on監聽事件

3.可以本頁面使用，也可以父子組件使用，也可以非關聯組件使用

 

嗯，就醬~~