兄弟组件之间传值

Posted 2020-11-28 bingchenzhilu

有的项目中，需要使用多个子组件，当需要传递值的时候，较为麻烦，怎样实现呢

1，一般可以使用子组件a传递给父组件，再由父组件传递给子组件b。但是一般较为麻烦，

2，使用bus作为中介，来传递ab组件之间的值

首先，创建bus.js文件，一般在src目录下，

import Vue from ‘vue‘;
export default new Vue;

其次，在组件a中，（只是截取部分代码，此处仅有触发传递的代码）

  <el-button  @click="edit(item.id)" >查看更多</el-button>

　edit()　函数

引入

import Bus from "@/bus.js";

　　按照自己写的路径引入即可

edit(id){
      Bus.$emit("businessId", id);
      this.$router.push({ path: `/admin/editbusiness/${id}` });
      console.log(id);
    }

　　（上面代码高亮部分是路由跳转一种写法，当router-link不够方便的时候，大多数可以使用$router.push，但是$router.push也有弊端，比如下面代码所示，因此使用上述高亮代码可完美解决）

  this.$router.push({ path: ‘/admin/editbusiness‘,query:{id:1}});
  this.$router.push({ name: ‘business‘,params:{id:1}});

b组件

首先

引入

import Bus from "@/bus.js";

创建一个函数，接收拿到的数据

 getAData(val) {
      console.log(val);
    },

　　在mounted中触发

  Bus.$on("businessId", this.getAData);

　　以上就是父子组件之间的传值，如有更好的方法，欢迎交流指正