聊聊Vue兄弟组件传值的几种方式

前言

自学完vue也有段时间了，俗话说好记性不如烂笔头，接下来会逐步把学的一些东西，已文章的形式发表，一个是方便后续查阅的方便，也能更加增加一些印象，下面进入正题。。

兄弟组件传值有3种：

1. 子传父，父组件接收后，再传给另一个子组件的形式
2. bus总线--- 一种组件间通信的方式，适用于任意组件间通信
3. 消息订阅与发布(pubsub)--同上 下面主要讲一下后面两种的使用方法

bus总线传值的使用(三步骤)

1.安装全局总线

-----在main.js中通过beforeCreate生命钩子，在Vue的原型对象上绑定一个bus总线，都知道所有的组件最终都是显示在APP上的，所以此处在APP组件实例创建之前绑定后，后面所有的组件都能访问到这个总线了

import Vue from "vue";

import App from './App.vue'

new Vue({
    el:'#app',
    render:h=>h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
}) 

2. 使用事件总线：his.$bus.$emit('xxx',data)

export default {
    name:'HelloVue',
     data(){
         console.log(this)
        return {
           name:'王老五',
            myAge:38
        }
    },
    methods:{
        addAge(){
            //触发组件实例身上的事件
             his.$bus.$emit('kevin',this.name)
        }
    }
}

3. 接收传过来的数据： this.$bus.$on('xxx',function),当然了，最好在关闭组件前解绑一下，对性能会好点

 export default {
        name:'MyDemo',
        data() {
            return {
                name:'李小四',
                myAge:38
            }
        },
        mounted() {
            //在接收数据的组件中绑定事件
            this.$bus.$on('kevin',(name)=>{
                console.log('我是demo组件，接收到hello组件的name是',name)
            })
        },
        beforeDestroy() {
            //关闭前解绑，提升性能
            this.$bus.$off('kevin')
        }
    }

运行结果如下：

消息订阅与发布(pubsub)

使用步骤：

1.安装pubsub --- npm i pubsub-js

2.导入pubsub模块---import pubsub from 'pubsub-js'

3.发布消息

import pubsub from 'pubsub-js'
export default {
    name:'HelloVue',
     data(){
         console.log(this)
        return {
           name:'王老五',
            myAge:38
        }
    },
    methods:{
        addAge(){
            //发布消息
            pubsub.publish('hello','我是传过去的数据')
             
        }
    }
}

4.接收消息

import pubsub from 'pubsub-js'
    export default {
        name:'MyDemo',
        data() {
            return {
                name:'李小四',
                myAge:38
            }
        },
        mounted() {
            //订阅消息
           this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
               console.log('MyDemo组件接收到数据拉',data)
           })
        },
        beforeDestroy() {
            //关闭订阅
          pubsub.unsubscribe(this.pubId)
        }
    }

综上所述消息订阅与发布其实跟总线的处理方式差不多，只是API的不同，这边就不多做讲解了，今天就卷到这吧，每天进步一点点。。。