组件传值-兄弟传值

组件传值

兄弟传值bus

第一步 创建bus.js

在src目录下新建utils/bus.js，内容如下：

import Vue from 'vue';
export default new Vue();

第二步 引用

在需要传值和接受值的vue文件中，各自引入bus.js

import bus from '@/utils/bus.js'

第三步 传值

定义传值的方法并传值

/**注意：
   常见为题：第一次调用拿不到值
   在页面1通过$emit方法传递数据然后跳转路由的时候，其实页面2的$on监听还没有建立，因此无法得到数据！
   所以在beforeDestroy函数中传值最佳
*/
beforeDestroy() {   
   bus.$emit('classInfo', this.classInfo);
},

第四步 接收值

在要接收的组件或者页面里

created() {
     bus.$on('classInfo',val =>{  //val就是传过来的值
       this.classInfo = val
     })
},