VueJS 未知自定义元素在单个文件组件中具有嵌套模板
VueJS Unknown custom element with nested template in single file components
我有一个 vue 的嵌套结构:
<app>
<column> : [array]
<task> : [array]
<resource> : [array]
我也在使用单文件组件。
对于 <app>
组件,它看起来像这样(/App.vue
文件)
<template>
<div id="app">
<column v-for=""></column>
</div>
</template>
<script>
import column from './components/Column'
export default {
name: 'project',
components: {
column
},
data () {
return {
}
}
}
</script>
<column>
组件(/components/Column.vue
文件):
<template>
<div>
<task v-for=""></task>
</div>
</template>
<script>
import task from './Task'
export default {
name: 'column',
components: {
task
},
data () {
return {
}
}
}
</script>
<task>
组件(/components/Task.vue
文件):
<template>
<div>
<resources></resources>
</div>
</template>
<script>
import { resources } from './Init-resource'
export default {
name: 'task',
components: {
resources
},
data () {
return {
}
}
}
</script>
到目前为止一切正常。该应用程序呈现一堆列,并在列内呈现任务。
但是接下来是另一层 <resource>
,看起来像这样(/components/Init-resource.vue
文件):
<template>
<div>
<select>
<option v-for=""></option>
</select>
</div>
</template>
<script>
export default {
name: 'resources',
data () {
return {
}
}
}
</script>
我收到这个错误:
vue.common.js?e881:509 [Vue warn]: Unknown custom element: <resources> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in component <task>
它无法识别最后一个 <resource>
组件。但是一切看起来都很好,导入是正确的,为模板返回了组件...
我找到了。我使用命名导入,所以不是这个:
import { resources } from './Init-resource'
应该是这样的:
import resources from './Init-resource'
我有一个 vue 的嵌套结构:
<app>
<column> : [array]
<task> : [array]
<resource> : [array]
我也在使用单文件组件。
对于 <app>
组件,它看起来像这样(/App.vue
文件)
<template>
<div id="app">
<column v-for=""></column>
</div>
</template>
<script>
import column from './components/Column'
export default {
name: 'project',
components: {
column
},
data () {
return {
}
}
}
</script>
<column>
组件(/components/Column.vue
文件):
<template>
<div>
<task v-for=""></task>
</div>
</template>
<script>
import task from './Task'
export default {
name: 'column',
components: {
task
},
data () {
return {
}
}
}
</script>
<task>
组件(/components/Task.vue
文件):
<template>
<div>
<resources></resources>
</div>
</template>
<script>
import { resources } from './Init-resource'
export default {
name: 'task',
components: {
resources
},
data () {
return {
}
}
}
</script>
到目前为止一切正常。该应用程序呈现一堆列,并在列内呈现任务。
但是接下来是另一层 <resource>
,看起来像这样(/components/Init-resource.vue
文件):
<template>
<div>
<select>
<option v-for=""></option>
</select>
</div>
</template>
<script>
export default {
name: 'resources',
data () {
return {
}
}
}
</script>
我收到这个错误:
vue.common.js?e881:509 [Vue warn]: Unknown custom element: <resources> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in component <task>
它无法识别最后一个 <resource>
组件。但是一切看起来都很好,导入是正确的,为模板返回了组件...
我找到了。我使用命名导入,所以不是这个:
import { resources } from './Init-resource'
应该是这样的:
import resources from './Init-resource'