vue组件间的通信方式

一、props/$emit

父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。

1. 父组件向子组件传值

prop只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且prop只读，不可被修改，所有修改都会失效并警告。

栗子一：
子组件article.vue如何获取父组件section.vue的数据articles:['红楼梦', '西游记','三国演义']

//section父组件
<template>
  <div class="section">
    <com-article :articles="articleList"></com-article>
  </div>
</template>

<script>
import comArticle from './article.vue'
export default{
  name: 'HelloWorld',
  components: { comArticle }
  data(){
     return {
        articleList: ['红楼梦', '西游记','三国演义']
     }
   }
}
</script>

//article子组件
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default{
   props: ['articles']
}
</script>

2. 子组件向父组件传值

$emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。
栗子二：
在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标

//section父组件
<template>
  <div class="section">
    <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
    <p>{{ currentIndex }}</p>
  </div>
</template>

<script>
import comArticle from './article.vue'
export default{
  name: 'HelloWorld',
  components: { comArticle }
  data(){
     return {
        currentIndex: -1,
        articleList: ['红楼梦', '西游记','三国演义']
     }
   },
   methods: {
    onEmitIndex(idx) {
      this.currentIndex = idx
    }
  }
}
</script>

//article子组件
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</span>
  </div>
</template>

<script>
export default{
   props: ['articles'],
   methods: {
    emitIndex(index) {
      this.$emit('onEmitIndex', index)
    }
  }
}
</script>

二、$children / $parent

当需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。可以使用$children / $parent

父组件访问子组件：使用$children或$refs

• $children可以访问该父组件的所有子组件，返回的是一个数组类型，包含了所有子组件对象，因此可以进一步访问子组件的属性、方法等
• $refs可以获取一个特定的子组件，$refs和ref指令通常是一起使用的。首先给某一个子组件设置ref属性绑定一个特定的ID。然后通过this.$refs.ID就可以访问到该子组件。

子组件访问父组件：使用$parent，返回的是一个对象

三、provide/ inject

provide/ inject是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。

不论子组件嵌套有多深, 只要调用了inject , 就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中获取数据

栗子：
假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件，B是A的子组件

//A.vue
<template>
  <div>
    <comB></comB>
  </div>
</template>

<script>
  import comB from '../components/test/comB.vue'
  export default {
    name: "A",
    //父组件用provide定义变量
    provide: {
      for: "demo"
    },
    components:{
      comB
    }
  }
</script>

//B.vue
<template>
  <div>
    {{demo}}
    <comC></comC>
  </div>
</template>

<script>
  import comC from '../components/test/comC.vue'
  export default {
    name: "B",
    //子组件用inject注入该变量
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      comC
    }
  }
</script>

//C.vue
<template>
  <div>
    {{demo}}
  </div>
</template>

<script>
  export default {
    name: "C",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

四、事件总线eventBus

eventBus又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

1. 初始化

创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.

import Vue from 'vue'
export const EventBus = new Vue()

2. 发送事件和接收事件

假设有两个组件: additionNum 和 showNum, 可以是兄弟组件也可以是父子组件；这里以兄弟组件为例:

<template>
  <div>
    <show-num-com></show-num-com>
    <addition-num-com></addition-num-com>
  </div>
</template>

<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {
  components: { showNumCom, additionNumCom }
}
</script>

//addtionNum.vue 中发送事件
<template>
  <div>
    <button @click="additionHandle">+加法器</button>    
  </div>
</template>

<script>
import {EventBus} from './event-bus.js'

export default {
  data(){
    return{
      num:1
    }
  },
  methods:{
    additionHandle(){
      EventBus.$emit('addition', {
        num: this.num++
      })
    }
  }
}
</script>

//showNum.vue 中接收事件
<template>
  <div>计算和: {{count}}</div>
</template>

<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>

3. 移除事件监听者

import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})

五、Vuex

1）Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.
Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上

2）Vuex各个模块

• state：用于数据的存储，是store中的唯一数据源
• getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算
• mutations：类似方法，改变state数据的唯一途径，且不能用于处理异步事件
• actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作
• modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

六、localStorage / sessionStorage

这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。 通过window.localStorage.getItem(key)获取数据 通过window.localStorage.setItem(key,value)存储数据

注意用JSON.parse() / JSON.stringify()做数据格式转换 localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

七、$attrs与 $listeners