Vue中的组件间通信的方式

目录

一、配置项 props

二、组件的自定义事件

三、全局事件总线(GlobalEventBus) 

四、消息订阅与发布

---

一、配置项 props

        1、功能：让组件接受外部传过来的数据

        2、实现过程：

        (1).传递数据：

                 <Demo name="xxx"/>

        (2).接收数据：

                第一种方式(只接收)：

                        props:['name']

                第二种方式(限制类型)：

                        props:{

                            name:Number

                        }

                第三种方式(限制类型、限制必要性、指定默认值)：

                       props:{

                            name:{

                              // 类型

                              type:String,

                              // 必要性

                              required:true,

                              // 默认值

                              default:'XXX',

                            }

                        }

        3、 备注：

props是只读的，vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需要修改，那么请复制props的内容到data中一份，然后区修改data中的数据。 

二、组件的自定义事件

        1、一种组件间通信的方式，适用于：子组件 ===> 父组件

        2、使用场景：

        A 是父组件，B 是子组件；

        B 想给 A 传数据；

        那么就要在 A 中给 B 绑定自定义事件(事件的回调在 A 中)。

         3、绑定自定义事件：

        第一种方式，在父组件中：

                <Demo v-on:vuetest="test" /> 或者 <Demo @vuetest="test" />

        第二种方式，在父组件中：

                <Demo ref="demo" />

                ....

                mounted(){

                  this.$refs.xxx.$on('vuetest',this.test)

                }

        4、触发自定义事件：this.$enit('vuetest',数据)

        5、解绑自定义事件：this.$off('vuetest') 

        6、注意：

        通过`this.$refs.xxx.$on('vuetest',回调)`绑定自定义事件时，回调要么配置在 methods 中，要么用箭头函数，否则 this 指向会出现问题！ 

三、全局事件总线(GlobalEventBus) 

        1、一种组件间通信的方式，适用于任意组件通信。

        2、 安装全局事件总线：

    // 在main.js中
    new Vue({
      el: "#app",
      // 将App组件放入容器中
      render: (h) => h(App),
      beforeCreate() {
        Vue.prototype.$bus = this; //安装全局事件总线
      },
    });

        3、使用事件总线：

                (1).接收数据：

                        A 组件想接收数据，则在 A 组件中给$bus 绑定自定义事件，

                        事件的回调留在 A 组件自身。

    methods(){
       demo(data){...}
    }
    ....
    mounted(){
      this.$bus.$on('xxx',this.demo)
    }

                 (2).提供数据： this.$bus.$emit('xxx',this.demo)

        4、最好在 beforeDestroy 钩子中，用$off 去解绑当前组件所用到的事件

    mounted() {
        this.$bus.$on("hello", (data) => {
          console.log("我是收到了数据", data);
        });
    },
    beforeDestroy() {
        this.$bus.$off("hello");
    },

四、消息订阅与发布

        1、一种组件间通信的方式，适用于任意组件间通信。

        2、使用步骤：

          1.安装pubsub:   npm i pubsub-js

          2.引入： import pubsub from 'pubsub-js'

          3.接收数据：A组件想接收数据，则在A组件订阅消息，订阅的回调留在A组件自身

                    methods(){

                      demo(datd){....}

                    }

                    ....

                    mounted(){

                      this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息

                    }

                   beforeDestroy() {

                     // this.$bus.$off("hello");

                     pubsub.unsubscribe(this.pubid);

                   },

             4.提供数据：pubsub.publish('xxx',数据)

             5.最好在 beforDestroy 钩子中，用`Pubsub.unsubscribe(pid)`去取消订阅.