vue是如何实现组件间通信的？

(1)props/$emit

父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以 向父组件通信。
​ a. 父组件向子组件传值
​ prop 只可以从上一级组件传递到下一级组件(父子组件)，即所谓的单 ​ 向数据流。而且 prop 只读，不可被修改。

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

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

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

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

b.子组件向父组件传值
$emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数args传 递给父组件,父组件通过v-on监听并接收参数。

// 父组件
<template>
  <div class="section">
    <article :articles="articleList"  
           @onEmitIndex="onEmitIndex">
    </article>
    <p>{{currentIndex}}</p>
  </div>
</template>
<script>
 import Article from './article.vue'
 export default {
   components: { Article },
   data() {
     return {
       currentIndex: -1,
       articleList: ['红楼梦', '西游记', '三国演义']
     }
   },
   methods: {
     onEmitIndex(idx) {
       this.currentIndex = idx
     }
   }
 }
</script>

//子组件
<template>
  <div>
    <div v-for="(item, index) in articles"  
         :key="index" @click="emitIndex(index)">
      {{item}}
    </div>
  </div>
</template>
<script>
 export default {
   props: ['articles'],
   methods: {
     emitIndex(index) {
       this.$emit('onEmitIndex', index)
     }
   }
 }
</script>

(2) ref/refs
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素； 如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组 件的方法或访问数据

// 子组件 A.vue
export default {
  data () {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}

//父组件
<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.name);  // Vue.js
      comA.sayHello();  // hello
    }
  }
</script>

(3)Vuex插件
Vuex 是Vue的状态管理工具，可以通过Vuex管理全局的数据。

​ 核心部分：

​ state：用于存储状态数据，是store中的唯一数据源

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

​ mutations：更新state数据的唯一途径，只能处理同步任务

​ actions：调用mutation中的方法改变state状态，可以处理异步操作

​ modules：用于项目中将各个模块的状态分开定义和操作，便于维护