| Vue2中的全局事件总线的安装与使用 | 您所在的位置：网站首页 › 新时代教师十大标准 › Vue2中的全局事件总线的安装与使用 |
|
什么是全局事件总线？ 全局事件总线就是一种组件间通信的方式，适用于任意组件间通信 1.安装全局事件总线的方法如下 //引入Aue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue的生产提示 Vue.config.productionTip = false //创建vm const vm = new Vue({ el: '#app', render: h => h(App), beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, })安装全局事件总线需要在new Vue实例的时候写入 2.使用全局事件总线 在使用全局事件总线之前，需要知道是谁想要接收数据，依靠谁去提供数据 2.1接收数据：假设你的A组件要接收B组件传递过来的数据，则在A组件中给$bus.$on绑定自定义事件，事件的回调留在A组件自身。 this.$bus.$on的第一个参数为B组件传递过来时起的名字，第二个参数为一个箭头函数，并且接收B组件传递过来的值 学校名称：{{name}} 学校地址：{{address}} export default { name: 'A', data() { return { name: '某某学校', address: '重庆' } }, mounted() { this.$bus.$on('giveA',(data) => { console.log('我是A组件，我收到了B组件传递过来的数据：', data); }) } }2.1提供数据：B组件想要给A组件传递数据，则在B组件中给$bus.$emit绑定自定义事件 this.$bus.$emit的第一个参数代表你传递参数过去时起的名字，第二个参数代表你要传递的值。 由此可见，我们给button绑定了一个名为sendStudentName的点击事件，当我们一点击这个按钮，就触发$bus.$emit自定义事件，则把B组件当中的学生姓名传递给了A组件。 学生姓名：{{name}} 学生性别：{{sex}} 把学生名给A组件 export default { name: 'B', data() { return { name: 'K', sex: '男', } }, methods: { sendStudentName() { this.$bus.$emit('giveA',this.name) } }, }2.3 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。 原因：当使用全局事件总线的组件被销毁或不使用了，那还把$bus身上的giveA事件占着，是不是不太好 this.$bus.$off()里面写上要解绑事件的名字，如果里面不写，那所有人给$bus绑定的事件全都使用不了了 学校名称：{{name}} 学校地址：{{address}} export default { name: 'A', data() { return { name: '某某学校', address: '重庆' } }, mounted() { this.$bus.$on('giveA',(data) => { console.log('我是A组件，我收到了B组件传递过来的数据：', data); }) }, beforeDestory() { this.$bus.$off('giveA'); } }以上就完成了基本的两个组件传递数据的方式 |
| CopyRight 2018-2019 实验室设备网 版权所有 |