problem description
Vue cannot register global components using typescript.
the environmental background of the problems and what methods you have tried
tried
- Vue.use()
- Vue.component(com.name, com)
- new Vue({ components: { } })
component code snippet
<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 -sharp606266
font-weight normal
cursor pointer !important
&:hover
text-decoration underline
</style>
what result do you expect? What is the error message actually seen?
the error message you actually see is:
Unknown custom element: < Bread >-did you register the component correctly? For recursive components, make sure to provide the "name" option.