vue的通信方式有哪些

1.vuex

2.事件总线eventBus

3.父子组件（props）

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

//父组件
<xxx :articles="articleList"></xxx>

//子组件
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
  </div>
</template>
 
<script>
export default {
  props: ["articles"]
};
</script>

1）子父组件

子组件emit绑定一个自定义事件，当这个事件被执行时，就会将参数传给父组件，父组件通过v-on监听并接收参数 （在上一个例子上，点击页面渲染出来的ariticle的item，父组件中显示在数组中的下标）

//父组件
<p>{{currentIndex}}</p>


data() {
    return {
      currentIndex: -1,
      articleList: ["红楼梦", "西游记", "三国演义"]
    };
  },
  methods: {
    onEmitIndex(idx) {
      this.currentIndex = idx;
    }
  }


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


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

4.作用域插槽

5.inject provider注入

6.动态路由

7.sessionStorage/localStorage

8.ref