vue组件间通信方式学习笔记

一、父子组件间通信：

        1、父组件给子组件传递参数：

        props配置项，设置在子组件中，用于接收父组件传递的参数，可以声明参数类型、必要性和默认值。

例：简单接收：props: [ 'one', 'two', 'three' ]

        声明接收：props: {

                                one: { type: string, required: true, default: 'one' },

                                two: { type: Number, required: true, default: 2 }

                        }

        2、子组件给父组件传递参数：

        需要先在父组件使用子组件时，定义一个子组件自定义事件，并在父组件配置好触发事件后的回调，由此，再在子组件触发调用父组件传递给子组件的方法，并传递参数，如此而来，就能在子组件触发（或者说抛出）方法时，父组件的方法中，就能接收到子组件传递过来的参数。

二、兄弟组件间通信、不相关组件间通信：

        兄弟组件间不能直接进行通信，只能依靠相同的父组件或者祖先组件，一层一层的向上传递参数到相同的祖先组件位置，再从祖先组件一层一层的向下传递到接受参数的组件。

        这样操作起来就比较麻烦，而且不易维护。于是就有了以下常用的组件间通信方式。

三、全局事件总线：

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

2. 安装全局事件总线：

   new Vue({

      ......

      beforeCreate() {

         Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm

      },

       ......

   })

3. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){

        demo(data){......}

      }

      ......

      mounted() {

        this.$bus.$on('xxxx',this.demo)

      }

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

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

四、消息订阅与发布：

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

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js

   2. 引入: 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(pid)去取消订阅。

五、vuex

        Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

​     多个组件需要共享数据时

创建文件：src/store/index.js

   //引入Vue核心库

   import Vue from 'vue'

   //引入Vuex

   import Vuex from 'vuex'

   //应用Vuex插件

   Vue.use(Vuex)  //作用就是让vue承认store这个属性，否则初始化Vc的时候，vue不会解析store这个属性

   //准备actions对象——响应组件中用户的动作

   const actions = {}

   //准备mutations对象——修改state中的数据

   const mutations = {}

   //准备state对象——保存具体的数据

   const state = {}

   //创建并暴露store

   export default new Vuex.Store({

      actions,

      mutations,

      state

   })

2. 在main.js中创建vm时传入```store```配置项

   ......

   //引入store

   import store from './store'

   ......

   //创建vm

   new Vue({

      el:'#app',

      render: h => h(App),

      store    //store配置项

   })

1. 初始化数据、配置actions、配置mutations，操作文件store.js

   //引入Vue核心库

   import Vue from 'vue'

   //引入Vuex

   import Vuex from 'vuex'

   //引用Vuex

   Vue.use(Vuex)

   const actions = {

       //响应组件中加的动作

      jia(context,value){

         // console.log('actions中的jia被调用了',miniStore,value)

         context.commit('JIA',value)

      },

   }

   const mutations = {

       //执行加

      JIA(state,value){

         // console.log('mutations中的JIA被调用了',state,value)

         state.sum += value

      }

   }

   //初始化数据

   const state = {

      sum:0

   }

   //创建并暴露store

   export default new Vuex.Store({

      actions,

      mutations,

      state,

   })

2. 组件中读取vuex中的数据：$store.state.sum

3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

   >  备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit