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></childrenSmoll>
  </div>
</template>
<script>
  //这两个文件一定要引入
  import Bus from "./bus";
  import childrenSmoll from "./childrenSmoll"; 
  export default {
    name: "childerEmit",
    methods:{
      btnClick(){
        Bus.$emit("mediateFile",true) // 使用$emit自定义事件把数据带过去
      },
    },
    components:{childrenSmoll}
  }
</script>
<style scoped>
</style>

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

<el-button @click="btnRemove">移除事件</el-button>
btnRemove{
  Bus.$off(['mediateFile']) // 移除刚刚定义的mediateFile,同时$off可以为多个参数
}