GitLab

背景

部分需要使用emiter的组件，在使用名称非 LCompone时，会出现异常如下

<!-- 对账单项 -->
<template>
  <Collapse v-model="activeNames" accordion>
    <CollapseItem title="面板1" name="1">
      <div>我是面板1内容</div>
      <div>我是面板1内容第二行</div>
      <div>我是面板1内容第三行</div>
    </CollapseItem>
  </Collapse>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Collapse, CollapseItem } from '@lhb/ui';

@Component({
  components: {
    Collapse,
    CollapseItem,
  }
})

export default class StatementDateItem extends Vue {

  /* props */

  /* data */
  private activeNames = []

  /* method */

}

</script>

<style lang="less" scoped>

</style>

问题追踪后，发现做如下修改即可用

import { Collapse as LCollapse, CollapseItem as LCollapseItem } from '@lhb/ui';

原因

componentName这套机制并没有被使用，同时我们自身的机制也不适配，所以通过添加一个额外参数来承载componentName的同样的功能

解决方案

通过对emitter.js改造后，目前只需要在在父级组件内添加如下代码即可

data() {
  return {
    lhbComponentName: 'LCollapse', // 用以承载componentTag，不可修改
    ...
  }
}