vue中$bus的用法及$emit、$on、$off的使用

vue中 $bus 一般与 $emit、 $on、 $off 连用，一般用在任意组件间的通信，即 $bus 用来传递非父子关系的数据。
如两个组件之间传递数据：
子组件1

this.$bus.$emit("hello",param);

子组件2

this.$bus.$on("hello",(param)=>{
});

1、$emit

$emit(‘自定义事件名’，要传递的数据)；
触发当前实例上的自定义事件，要传递的数据会传给监听器；

2、$on

$on(‘自定义事件名’，callback)；
监听当前实例上自定义事件，callback回调$emit要传递的数据；

注意：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发。

3、实例事件
实例事件就是在构造器外部调用构造器内部的数据。

4、实例
在Student组件中提供数据给另一个School组件

<template><div class="student"><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><button @click="sendStudentName">把学生名给School组件</button></div>
</template><script>export default {name:'Student',data() {return {name:'曹操',sex:'男',}},methods: {//提供发送数据sendStudentName(){        this.$bus.$emit('hello',this.name)}},}
</script>

在School组件中使用事件总线，接收数据。School组件想接收数据，则在School组件中给 $bus绑定事件，事件的回调则留在School组件自身。

<template><div class="school"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div>
</template><script>export default {name:'School',data() {return {name:'交通学院',address:'上海',}},mounted() {//绑定当前事件（这里以hello为例）this.$bus.$on('hello',(data)=>{      console.log('我是School组件，收到了数据',data)})},//收尾操作，销毁beforeDestroy(){        this.$bus.$off('hello')  //$off解绑当前组件所用到的事件}}
</script>

其中，$off 解绑当前组件所用到的事件。

5、小结
$emit写在子组件 / 兄弟组件：

  methods: {bgClick() {bus.$emit('getMsg1')bus.$emit('setIndex1')},...},

$on写在父组件 / 兄弟组件：

  mounted() {bus.$on('getMsg1', this.getMsg)；bus.$on('setIndex1', this.setIndex)；},beforeDestroy() {bus.$off('getMsg1')；bus.$off('setIndex1')；},

vue中$bus的用法及$emit、$on、$off的使用相关推荐

Vue中$bus的用法及$on、$off的使用
Vue中 $bus一般与 $on. $off连用,一般用在任意组件间的通讯,所以今天就一起说,这里给大家举一个案例首先在main.js中配置全局总线 //引入Vue import Vue from ...
Vue 脚手架||Vue 脚手架的基本用法
Vue 脚手架 Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/ npm install -g @vue/cli 检测是否安装成功 ...
Vue中bus的使用
vue总线机制(bus) vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目数据在很多组件之间使用的情况 ...
vue、bus 使用遇到的坑，组件之间无法传值；vue、bus 第一次获取不到值，后面再点击重复执行
vue.bus 使用遇到的坑,组件之间无法传值:vue.bus 第一次获取不到值,后面数据叠加问题定位: 出现无法传值的情况,检查传值过程中组件是否还没有渲染:可能出现的情况是:组件被if,在你使用 ...
vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...
vue中props的用法
vue使用props的用法日常编程中都会用到父组件用子组件.子用父的情况,下面先介绍一种子传父的情况 1.在父组件中 (1).首先是在其定义一个list属性以存储其数据值 (2).定义一个绑定属性& ...
vue 插槽 slot 的用法
vue 插槽 slot 的用法一.简单定义.使用 slot 二.slot 变量传值三.跨组件传递 slot 方法1: 多定义一个中间插槽方法2:使用 scopedSlots 字段传递作用域插槽 ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
VUE兄弟组件之间传值，Vue.prototype.bus = new Vue()，this.bus.$on 的使用方法
举个例子: 组件一中有个分享按钮,点击分享按钮,展示组件二中的分享组件: 组件二分享组件有个取消按钮,点击关闭分享组件. 一.在main.js中添加一个bus实例: Vue.prototype.bus ...

vue中$bus的用法及$emit、$on、$off的使用

vue中$bus的用法及$emit、$on、$off的使用相关推荐

最新文章

热门文章