兄弟组件之间传值

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

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);

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

 

posted @ 2020-04-02 16:56  冰晨之露  阅读(4332)  评论(0编辑  收藏  举报