vue 组件之间的传参bus的使用

338 阅读1分钟

创建一个Bus总线 bus.js

import Vue from "vue";
const bus = new Vue();
export default bus;

$emit负责传参

在A组件中引用bus.js并使用,A组件传参

<template>
  <a-button @click="send"></a-button>
</template>

<script>
import Bus from "../../bus.js";

export default{
  data(){
    return {}
  },
  methods:{
    send(){
     let a = {name:"张三",age:23};
      Bus.$emit("sendCont",a); //sendCont必须和另一个接受的名字一样,a就是要传过去的内容;
    }
  }
}
</script>  

$on负责获取参数

B组件获取

<script>
  import Bus from "../../bus.js";
export default{
  data(){
    return {}
  },
  created(){
    Bus.$on("sendCont",val=>{
      console.log(val);//为A组件传过来的内容这里去做处理
    })
  }
}
 </script>