vue中$emit、$on、$off的用法

首先新建一个js文件转为两个vue文件的桥梁

bus.js文件

注意: 子组件的跟父子间都要引入这个文件（文件中写了注释）

import Vue from "vue"
export default new Vue()

childrenSmoll文件（用了element-ui）子组件（$on）

<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="isHtmlShow"
      width="30%"
    >
      <span>这是一段信息</span>
      <span>dasdsadsadsadsajdlsajdsapodjpoas</span>
    </el-dialog>
  </div>
</template>

<script>
import Bus from './bus.js'
export default {
  name: 'ChildrenSmoll',
  data() {
    return {
      isHtmlShow: false
    }
  },
  created() {
    // mediateFile 这个值与父组件的bus.$emit(第一个参数相同)
    Bus.$on('mediateFile', (e) => {
      this.isHtmlShow = e // 这里采用页面一加载的时候触发得到传过来的值
    })
    /* 很多人以为为什么我父组件引入这个子组件没有这个值, 并且引用所有子组件的生命周期不是早就已经走完了吗?是不是就会报错？
  答案不会
  第一点 Dom元素是已经隐藏的
  第二点 bus.js文件导出的是new Vue() 看清楚是new Vue()
 */
  }
}
</script>
<style scoped>
</style>

childerEmit.vue文件（用了element-ui）父组件（$emit）

<template>
  <div>
    <!--当点击的时候就会传替参数true 过去子组件就会显示 -->
    <el-button @click="btnClick">点击传替信息</el-button>
    <childrenSmoll />
  </div>
</template>
<script>
// 这两个文件一定要引入
import Bus from './bus'
import childrenSmoll from './childrenSmoll'
export default {
  name: 'ChilderEmit',
  components: { childrenSmoll },
  methods: {
    btnClick() {
      Bus.$emit('mediateFile', true) // 使用$emit自定义事件把数据带过去
    }
  }
}
</script>
<style scoped>
</style>

$off意思就是移除绑定元素
childerEmit.vue文件加上一个按钮

<template>
  <div>
    <el-button @click="btnRemove">移除事件</el-button>
  </div>
</template>
<script>
// 这两个文件一定要引入
import Bus from './bus'
export default {
  name: 'ChilderEmit',
  components: { },
  methods: {
    btnRemove() {
      Bus.$off(['mediateFile']) // 移除刚刚定义的mediateFile,同时$off可以为多个参数
    }
  }
}
</script>
<style scoped>
</style>