Vue 组件通信

一、父组件、子组件通信

1、父子组件通信： 父组件通过 props 向下传递数据给子组件  
     父-->子(方法)：可以通过ref直接获取子组件实例XX，方法调用XX.xx
  备注：
     1) 单向数据流，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
  这里有两种常见的试图改变一个 prop 的情形：
        <1> prop 用来传递一个初始值,子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

        <2>prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

   2) JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
props: 传值，父组件数值不变化，不会传值给子组建
   3) watch： 子组件监听
     watch 在值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，可以用immediate属性
     watch 监听对象，可以用deep属性
     参考：vue computed计算属性 watch监听
                监听属性watch(handler方法immediate属性deep属性)

2、非父子组件通信

    1) 子组件调用$emit方法向父级组件触发一个事件：?this.$emit('user-defined',"参数")
    2) 在父组件引用该子组件内监听这个事件：v-on: user-defined
    3) 父组件执行 user-defined 事件(父组件事件改变父组件的值)

二、非父子组件通信
   使用一个空的 Vue 实例作为中央事件总线

import Vue from 'vue';

let bus = new Vue();
export default bus;

三、vuex 集中式状态管理模式

1、Vuex 的定义：

// Vuex 的定义： 
import Vue from 'vue'
import Vuex from 'vuex'
 
const store = new Vuex.Store({
    state: {      // 自定义数据结构
        count: 0
    },
    getters: {    // 通俗理解getter里的函数就是vuex里的计算属性，类似于computed函数
      countAdd (state) {
         return state.count++;
      }
    },
    mutations: {  // 修改Store 内数据状态的方法，必须是同步事务
        increment (state,n) {  // n: 入参
            state.count++
        }
    },
    actions: {    // 类 mutations，可以包含异步事务
      incrementAsync ({ commit,state },n) { // commit 类 Store
        setTimeout(() => {
          commit('increment')
         })
      }
    }

 2、Vuex 在组件内的使用：

// vuex 的修改
mutations:
  单个：this.$store.commit('increment',n)
  多个：...mapMutations([
          'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.commit('incrementBy', amount)`
       ])
 
actions:
  单个：this.$store.dispatch('increment',n)
  多个：...mapActions([
          'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.dispatch('incrementBy', amount)`
       ])
// vuex 的获取 
单个：computed: {
       count () {
         return this.$store.state.count
       },
       countAdd () {
	
       }
     }
多个：mapState 辅助函数
    computed: {
      // 使用对象展开运算符将此对象混入到外部对象中
      ...mapState([
        'count','countAdd'...
      ])

// vuex 模块(module): 当应用变得非常复杂时，store 对象就有可能变得相当臃肿
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
 
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
 
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

备注：
1）vuex与localStorage
   vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，
具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。

参考: vue组件间通信六种方式（完整版）