vue蓄力2：组件之间出通信

常见使用场景可以分为三类:

• • 父子组件通信: props; $parent / $children; provide / inject ; ref ;  $attrs /$listeners

  • 兄弟组件通信: eventBus ; vuex

  • 跨级通信:  eventBus；Vuex；provide / inject 、$attrs / $listeners

1.props+$emit

2.$chirldren+$parent

  this.$children[0].messageA
  this.$parent.msg;

3.provide+inject(可以跨多级获取哦)
   provide: { for: "demo" }
   inject: ['for']   this.for 

4.res+$refs

5.eventBus（使用过多不好维护，臃肿）
   import {EventBus} from './event-bus.js'
   EventBus.$emit('addition', { num:this.num++ })  （发送事件）
   EventBus.$on('addition', param => { this.count = this.count + param.num; })（接收事件）
   EventBus.$off('addition', {})（移除监听者）

bus

utils - bus.js

 

import Vue from 'vue'
const bus = new Vue()
export default bus 

一、传值

发送信息

 

import bus from '@/utils/bus'

第一个参数为标志变量，第二个参数为通信的值

 

bus.$emit('message', 'hello');

接收信息

 

import bus from '@/utils/bus'

第一个参数为标志变量，第二个参数中的e为通信的值

 

bus.$on('message', (e) => {
    console.log(e)
})

二、调用方法

一个组件(A)调用另一个组件(B)的方法

B组件的方法

 

import bus from '@/utils/bus'

 

mounted () {    
  bus.$on('testA', this.testA)  
},

 

testA () {
  console.log('由A组件调用')
},

A组件调用

 

import bus from '@/utils/bus'

 

mounted () {
  bus.$emit('testA')
},

 

6.localStorage / sessionStorage

7.$attrs与 $listeners （props类似 this.$attrs）

8.vuex  （Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题）

Vuex各个模块

1. state：用于数据的存储，是store中的唯一数据源

2. getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算

3. mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件

4. actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作

5. modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护
   获取：this.$store.state.AMsg
   触发：this.$store.commit('receiveBMsg', { BMsg: this.BMessage })
   
   store.js：
    

   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)
   const state = {
   // 初始化A和B组件的数据，等待获取
   AMsg: '',
   BMsg: ''
   }
   
   const mutations = {
   receiveAMsg(state, payload) {
   // 将A组件的数据存放于state
   state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
   // 将B组件的数据存放于state
   state.BMsg = payload.BMsg
   }
   }
   
   export default new Vuex.Store({
   state,
   mutations
   })