vue组件间比较常见的通讯方式

1.props---这是一种比较常见的父子组件通讯的方法，通过props父组件可以传递参数以及方法

父组件：
    <edit-publish
      v-if="editVisible"
      :mockData="mockData"
      :editVisible="editVisible"
      :targetKeys="targetKeys"
      @edit-close="editPublishClose"
      @edit-cancel="editPublishCancel"
      :selectedSchoolIds="selectedSchoolIds"
    />

子组件：
 @Prop()
  private editVisible!: boolean;
  // 选中的学校id数组
  // @Prop()
  // private selectedSchoolIds!: Array<string>;
  // 穿梭框数据
  @Prop()
  private mockData!: Array<PublishModule.TransferMock>;
  // 左侧选中穿梭框右侧keys

2.$emit---触发父组件的自定义事件,其实就是父传子的方法

子组件：
 @Emit()
  editClose() {
    return this.usetargetKeys;
  }

3.vux---vux其实是vue中状态管理的插件

state:定义存贮数据的仓库 ,可通过this.$store.state 或mapState访问
getter:获取 store 值,可认为是 store 的计算属性,可通过this.$store.getter 或
       mapGetters访问
mutation:同步改变 store 值,为什么会设计成同步,因为mutation是直接改变 store 值,
         vue 对操作进行了记录,如果是异步无法追踪改变.可通过mapMutations调用
action:异步调用函数执行mutation,进而改变 store 值,可通过 this.$dispatch或mapActions
       访问
modules:模块,如果状态过多,可以拆分成模块,最后在入口通过...解构引入

4.listeners
前面介绍了props通讯 ，如果通过props传递的参数或者方法很多，那么在子组件中需要声明的就很多，此时我们就可以通过listeners分别获取父组件传递来的参数和方法，如果子组件中已通过props声明了变量，那么通过$attrs就获取不到该变量

5.parent & children
children & parent 并不保证顺序，也不是响应式的 只能拿到一级父组件和子组件

6.refs

父组件:
  <child-item ref="childrenref" ></child-item>
this.$refs.childrenref

7.