Vue中注册普通JS对象作为组件时出现“Failed to resolve component: autocompletecomponent”错误的求助

看起来你遇到的问题主要是两个关键点：DOM模板的大小写解析问题，还有Vue 3组件data选项的写法规范问题。我来一步步帮你捋清楚并解决：

1. 组件名大小写导致的识别失败 #

HTML本身是不区分大小写的，你在模板里写的<AutoCompleteComponent>会被浏览器自动转换成全小写的<autocompletecomponent>，但你注册的组件名是AutoCompleteComponent，Vue找不到匹配的组件，就抛出了那个警告。

解决这个问题很简单，只需要调整组件标签的写法，同时保证注册的组件名能对应上：

修改模板中的组件标签 #

把这段代码：

<AutoCompleteComponent class="field-field" :suggestions="cities" :selection.sync="selectedCity" />

改成短横线分隔的形式：

<auto-complete-component class="field-field" :suggestions="cities" :selection.sync="selectedCity" />

对应调整组件注册 #

不管是局部注册还是全局注册，只要名字能对应上就行：

• 局部注册（在app对象的components里）：

components: {
  // Vue会自动把大驼峰的组件名映射成短横线分隔的形式，这样写也能匹配
  AutoCompleteComponent
}

或者直接写短横线的名字更直观：

components: {
  'auto-complete-component': AutoCompleteComponent
}

• 全局注册（如果你用这种方式的话）：

vueApp.component("auto-complete-component", AutoCompleteComponent);

2. Vue 3组件data选项的写法错误 #

另外，你的AutoCompleteComponent里的data是直接写的对象：

data: {
    open: false,
    current: 0
},

这是Vue 2的写法，在Vue 3中，组件的data必须是一个返回对象的函数，否则会出现运行时错误。你需要改成这样：

data() {
    return {
        open: false,
        current: 0
    }
},

最后整理后的关键代码示例 #

修改后的AutoCompleteComponent.js #

const AutoCompleteComponent = {
    data() {
        return {
            open: false,
            current: 0
        }
    },
    methods: {
        // ...你的方法代码（保持不变）
    },
    computed: {
        matches() {
            return this.suggestions.filter((str) => {
                return str.indexOf(this.selection) >= 0;
            });
        },
        openSuggestion() {
            return this.selection !== "" &&
                   this.matches.length != 0 &&
                   this.open === true;
        }
    },
    template: "#vue-auto-complete-template"
}

export default AutoCompleteComponent;

修改后的模板组件标签 #

<auto-complete-component class="field-field" :suggestions="cities" :selection.sync="selectedCity" />

这样调整之后，组件应该就能正常被识别和运行了。

备注：内容来源于stack exchange，提问作者Tomáš Zato