站长工具查询ip地址无锡百度信息流

说明：为了解决组件间的通信，也就是组件与组件间的数据传递(它们之间毫无关系)；

这里以组件1传递数据到组件2为例

1.首先新建一个Bus.js文件

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2.在组件1中引用 传递数据

import Bus from './Bus'export default {data() {return {.........}},methods: {....Bus.$emit('log', 120)},}   

3.在组件2中引用 接收数据

import Bus from './Bus'export default {data() {return {.........}},mounted () {Bus.$on('log', content => { console.log(content)});    }    
} 

4.注意事项

（1）在传递数据的组件中使用Bus.$emit(),在接收数据的组件中使用Bus.$on()

（2）Bus.$emit()的第一个参数要与Bus.$on()的第一个参数一模一样（可以随意命名）

（3）Bus.$emit()的第二个参数是要传递的数据，如果要传递多个数据就以逗号隔开，相当于函数的实参一样

（4）Bus.$on()的第二个参数是箭头函数或者定义的方法，如果要接收多个数据就以逗号隔开，相当于函数的形参

（5）一定要在接收数据的组件页面关闭页面时销毁Bus（卸载生命周期里进行操作），具体如下

beforeDestroy () {Bus.$off('updateData', this.getData);};//this.getData是自己定义的方法，用来接收数据的