未知的自定义元素：是否正确注册了组件？对于递归组件，请确保提供"name"选项

Question

以下代码正在开发中，但不用于生产，出现错误我已经在 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 

上面的错误从何而来。

Answer 1

回答这个问题，即使原作者确定了问题的不同原因：我收到了相同的 Vue 错误消息，我猜其他人也会在这里导航。

当我将这一行添加到我的导出语句时，这为我修复了它：

    name: "Comment"

请注意，"注释"是以递归方式调用自身的(当前(组件的名称。

Answer 2

我使用 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 来完成它。