vue中组件通信----$emit说明及使用

作用： 子组件使用 $emit,让父组件监听到自定义事件 

用法：

vue.$emit(自定义事件名称, 参数)

使用：比如子组件使用$emit定义一个 自定义事件changeCompont

    async clickTree(data,node) {
      this.currentNodeId = data.id;
      if (data.type == "subsystem") //子系统
        this.$emit('changeCompont', 'RolemgrSubSysTab', data);
      else if (data.type == "rolegroup")//角色组。，
        this.$emit('changeCompont', 'RolegroupTab', data);
      else if (data.type == 'role')
        this.$emit('changeCompont', 'RoleTab', data);
    }

在父组件中监听该事件@changeCompont

  <template>
  <div class="rolemgr-page" >
    <LeftNav @changeCompont="changeCompont" ref="leftNav"
             :class="subGuid?'apply-left-page':''"></LeftNav>
    <!--<keep-alive>-->
    <div class="rolemgr-page base-right-page" :class="subGuid?'apply-right-page':''">
      <div class="base-right-conent-page">
        <component v-if="componentName" :is="componentName" :treeNode="treeNode" @flushTree="flushTree" ref="componentName"></component>
        <EmptyData v-else></EmptyData>
        <!--</keep-alive>-->
      </div>
    </div>
  </div>
</template>

注意：父组件接收参数时，参数个数可以不同，参数的顺序有严格要求

定义时子组件传的参数 ：

   this.$emit('changeCompont', 'RolegroupTab', data);

父组件接收参数时：

其中：父组件name 和子组件中RolegroupTab对应

           而父组件中data和子组件中data对应

  changeCompont(name, data, type) {
      this.componentName = name;
      this.treeNode = data;
}

 

总结：

因此当在子组件中触发自定义事件后，在父组件中监听到该事件从而执行相应的方法，从而实现子组件使用 $emit,让父组件监听到自定义事件