以下代码正在开发中,但不用于生产,出现错误我已经在 componenet 上添加了 name 属性,但它仍然不起作用。现在我已经删除了微调器组件。
Unknown custom element: <event-image> - did you register the component correctly?
For recursive components, make sure to provide the "name" option
我的 .vue 组件看起来像这样:
<template>
<div class="text-grey-darker text-center bg-grey-light mx-2 my-2 border border-teal
w-64 h-64 z-0 relative">
<img :src="url" class="w-full h-full">
<div class="pin-r pin-t absolute z-40">
<button class="bg-transparent text-red bold text-xl italic"
@click="remove">X</button>
</div>
</div>
</template>
<script>
export default{
name:'event-image',
props: ['image'],
data(){
return {
showspinner:false
}
},
methods: {
remove(){
this.showspinner = true;
axios.delete('/media/'+JSON.parse(this.image).id)
.then(response => {
this.showspinner = false;
location.reload();
})
.catch(errors =>{
});
}
},
computed : {
url(){
return JSON.parse(this.image).url;
}
}
}
</script>
并在应用程序上注册.js为:
Vue.component(
'event-image',
require('./components/event/EventImage.vue'));
然后在刀片上使用它,例如:
@foreach($images as $image)
<event-image image="{{ json_encode($image) }}" ></event-image>
@endforeach
上面的错误从何而来。
回答这个问题,即使原作者确定了问题的不同原因:我收到了相同的 Vue 错误消息,我猜其他人也会在这里导航。
当我将这一行添加到我的导出语句时,这为我修复了它:
name: "Comment"
请注意,"注释"是以递归方式调用自身的(当前(组件的名称。
我使用 SFC(单个文件组件(收到相同的错误消息,代码如下:
我想在另一个./buttons/SomeButton.vue
中使用的组件:
<template>
...html of component...
</template>
<script>
export default {
name: "some-button",
...
}
</script>
使用上述组件的组件./RowOfButtons.vue
:
<template>
<p>
<some-button/>
</p>
<template>
<script>
import SomeButton from "./buttons/SomeButton"
export default {
name: "row-of-buttons",
comments: {
SomeButton
},
...
}
</script>
显然有错别字,因为 PhpStorm 用 comments
而不是 components
来完成它。