项目实训第三周-3

目录

前言

正文

1. 通过EventBus 实现组件之间数据传递

1.1定义 bus.js 一般在src目录下的utils的包中创建

1.2在main.js 中配置全局

1.3基本使用

结束

---

前言

本文依旧是关于Vue的一些学习

正文

1. 通过EventBus 实现组件之间数据传递

• 优点 ：没有级别和关系的限制

• 缺点： bus不会随着组件的销毁而自动销毁，需要我们手动销毁

1.1定义 bus.js 一般在src目录下的utils的包中创建

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

1.2在main.js 中配置全局

Vue.prototype.bus = new Vue();

1.3基本使用

• from组件 ，在方法中添加如下所示，传递数据

this.$bus.$emit('row', row) // ‘row’随意取的名字，取数据要根据这个名字来取， row是data中的数据名

• to组件，在方法中进行接收数据

this.$bus.$on('row', res => { // 通过相同的名字，接收数据，并入callback的数据进行处理              
      this.Province = res
    })

• to组件中记得销毁bus 不然会出现bug

 beforeDestroy () {
    this.$bus.$off('row', { })
  }

结束

本文便是项目实训的第九篇日志

主要参考自https://blog.csdn.net/gy99csdn/article/details/113954174