vue兄弟组件传值（vue兄弟组件通讯，vue同级组件传值通讯，vue兄弟组件通讯传值常用的两种方式，超详细）

怼烎@ 2023-10-03 22:54 14阅读 0赞

#### **简介: 兄弟组件，就是同级别的组件⭐** ####

#### **第一种： EventBus方法** ####

#### 首先在main.js文件中定义一个新的bus对象，然后挂载在原型链上，生成一个全新的Vue实例，通过bus.$emit（'自定义的事件名'，要传的值)传值,通过bus.$on来接收，具体步骤如下： ####

**1、首先在main.js中生成一个全新的vue实例，如下：**

//写在main.js中
    Vue.prototype.$bus = new Vue()

**2、****在组件brother.vue 中，声明并监听事件 brotherEvent；**

//brother.vue
    //在同级别组件中声明监听事件
    created(){
        this.$bus.$on('brotherEvent', res=>{
            console.log(res) // res就是sister.vue里choseEvent方法传递的值data
        })
    }

**3、****在组件 sister.vue（和brother.vue 同级）中，触发 brotherEvent事件；**

//sister.vue
    //在方法中调用事件
    methods:{
        choseEvent(){
            this.$bus.$emit('brotherEvent',this.data)
        }
    }

**通讯成功●'◡'●**

#### **第二种：中间件方法** ####

#### **原理就是通过父组件作为中间件来通讯，结合子传父，父再传子，实现同级别间的兄弟组件传值，具体步骤如下：** ####

**1、****首先在父组件引入两个子组件，并且给子组件添加自定义方法，如下：**

//father.vue
    //组件引入
    import brother from "./components/brother.vue";
    import sister from "./components/sister.vue";
    //组件注册
    components: {
        brother,
        sister,
    },
    //组件使用
    //在子组件上添加自定义方法  @defineBrother="choseBrother" 
    <brother @defineBrother="choseBrother" />
    //在子组件上添加自定义方法  @defineSister="choseSister"
    <sister @defineSister="choseSister" />

**2、****在子组件使用$emit调用子组件的自定义方法，并且传值；**

**brother.vue:**

//brother.vue组件
    <button @click="choseBrotherBtn">兄弟按钮</button>
    
    data() {
        return {
          brotherMsg: [1, 2, 3, 4],
        };
      },
    
    methods: {
        choseBrotherBtn() {
          this.$emit("defineBrother", this.brotherMsg);
        },
      },

**sister.vue:**

//sister.vue组件
    <button @click="choseSisterBtn">姐妹按钮</button>
    
    data() {
        return {
          sisterMsg: { name: "xxx" },
        };
      },
    
    methods: {
        choseSisterBtn() {
          this.$emit("defineSister", this.sisterMsg);
        },
      },

**3、****父组件通过自定义方法，接收来自子组件传递的数据；**

//father.vue接收数据
     data() {
        return {
          data: "",
          msg: "",
        };
      },
    
     methods: {
        choseBrother(value) {
          console.log(value);//这里的value就是兄弟组件传过来的数组数据brotherMsg
          this.data = value;//赋值给父级组件data
        },
        choseSister(value) {
          console.log(value);//这里的value就是姐妹组件传过来的数据对象sisterMsg
          this.msg = value;//赋值给父级组件msg
        },
      },

**4、****父组件接收到数据以后，再通过父传子，传递对应数据；**

//father.vue
      //父传子:sendFather="msg";
      //把sister.vue中的数据sisterMsg 传给brother;
        <brother :sendFather="msg" @defineBrother="choseBrother" />
    
      //父传子  :sendSister="data";
      //把brother.vue中的数据brotherMsg 传给sister;
        <sister :sendSister="data" @defineSister="choseSister" />

**5、****最后使用props接收数据；**

//兄弟组件 接收来自 姐妹组件 的 对象数据sisterMsg
    props:["sendBrother"],
    
    {
       {sendBrother}}

//姐妹组件 接收来自 兄弟组件 的 数组数据brotherMsg
    props:["sendSister"],
    
    {
       {sendSister}}

**兄弟组件（同级组件）传值通讯成功(●'◡'●)**