组件通信

1、props 和 $emit

适用与父子组件之间传值，父组件通过属性的方式将值传递给子组件，子组件通过props接收父组件的传值，子组件通过 $emit 自定义事件的方式向父组件传值，父组件通过监听该事件接收子组件传递的值。

2、$parent 获取父组件值

子组件通过 this.$parent 获取父组件的属性和数据，还可以获取父组件身上的方法。

3、$children 和 $refs 获取子组件值

直接获取子组件的属性、方法，不仅限于数据。使用 $children 会返回当前组件所包含的所有子组件数组使用$ refs ,需要在子组件上添加 ref 属性，类似于操作 DOM 节点。

4、事件总线

在 main.js 中注册全局事件总线 Vue.protorype.$bus = this 通过事件总线传递数据的方式可以实现任何组件之间的通信。

5、Vuex状态管理

6、localStorage

localStorage是H5的数据存储方式，数据存储在本地。

全局事件总线

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

2、安装全局事件总线：

new Vue({
......
  beforeCreate() {
    // 在创建之前添加
    Vue.prototype.$bus = this // 安装全局事件总线。$bus 就是当前应用的 vm
  },
 ......
}).$mount('#app')

3、使用事件总线：

1、接收数据：A组件想接收数据，则A组件中给$bus 绑定自定义事件，事件的回调留在A 组件自身
 methods: {
   demo(data){......}
   },
 ......
 mounted() {
   this.$bus.$on("xxxx", this.demo);
   },
 2、提供数据：this.$bus.$emit('xxx',数据)

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

beforeCreate() {
  this.$bus.$off("xxxx");
 },

消息订阅与发布

1、订阅消息：消息名 2、发布消息：消息内容 pubsub-js

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

2、使用步骤： ①、安装 pubsub： npm i pubsub-js ②、引入：import pubsub from "pubsub-js";

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

methods(){
    demo(data){......}
}
......
mounted(){
    this.pid = pubsub.subscribe('xxx', this.demo) //订阅消息
}

4、提供数据： pubsub.publish("xxx", 数据);

5、最好在 beforeDestroy 钩子中，用 pubsub.unsubscribe(this.pubId) 去取消订阅

Vue.js学习笔记(拾壹)

组件通信

全局事件总线

消息订阅与发布