Vue在使用typescript的情况下 无法注册全局组件

Question

问题描述

Vue使用typescript无法注册全局组件。

问题出现的环境背景及自己尝试过哪些方法

尝试过

- 使用Vue.use(组件)的方式
- 使用Vue.component(com.name, com)的方式
- 使用new Vue({ components: { 组件 } })的方式

组件代码片段

    <template>
      <el-card
        shadow="hover"
        class="bg-white bread-wrapper"
      >
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>
        <router-link
          to="/"
          class="navigate"
        >首页</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item
        :key="bread.name"
        v-for="bread in breads"
      >
        <router-link
          :to="bread.url"
          class="navigate"
        >{{bread.name}}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </el-card>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'bread-component'
})
export default class BreadComponent extends Vue {
  @Prop(Array) bread?: Array<any>
}
</script>

<style lang="stylus" scoped>
.bread-container
  margin-bottom 15px
  border 0 none
  border-radius 0
  cursor pointer

  .navigate
    color #606266
    font-weight normal
    cursor pointer !important

    &:hover
      text-decoration underline
    </style>

你期待的结果是什么？实际看到的错误信息又是什么？

实际看到的错误信息是：
Unknown custom element: <Bread> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

最后我发现了 这个是个很可笑的错误? 我用组件的时候，写错了组件名字。。。。

Answer 2

我想可能是这个地方没有写对吧。

export default class BreadComponent extends Vue {
  @Prop(Array) bread?: Array<any>
}