Vue----事件总线

通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意传值的效果

1.给要传值的组件调用this.$root.$emit（"绑定函数名"，"传值"）

2.接受值得组件调用this.$root.$on("绑定函数名",(e)=>{console.log(e)})

举例：

传值文件：

<template>

    <div>

        <button @click="change">传值给APP</button>

       

    </div>

</template>

<script>

export default{

           methods:{

            change(){

                this.$root.$emit("hand","tbox2给App传的值")

            }

        }

        }

</script>

 

接受值文件：

mounted(){

  this.$root.$on("hand",(e)=>{

    this.msg=e

  })

}

这样就可以直接向任何组件进行传值，只需要给替我们绑定$on和$emit事件就行了，但是这样得事件是绑定在根节点上的，根节点还要会绑定其他得任务，所以这样绑定会影响性能

优化：

在main.js中给vue得原型上添加一个$bus给其添加上$emit,$on,$off方法

Vue.prototype.$bus=new Vue({

  methods:{

    on(type,callback){

      this.$on(type,callback)

    },

    emit(type,value){

      this.$emit(type,value)

    },

    off(type,callback){

      this.$off(type,callback)

    }

  }

})

使用：

接收文件

mounted(){

  this.$bus.on("hand",(e)=>{

    this.msg=e

  })

}

 

     发送文件：

        methods:{

            change(){

                this.$bus.emit("hand","tbox2给App传的值")

            }

        }