Vue中<billings>组件提示未知自定义元素，求排查错误原因

首先，你的报错核心问题出在局部注册时的导入方式错误，再加上全局/局部注册重复操作的混淆，导致组件没有被正确识别。下面一步步拆解问题并给出修复方案：

1. 局部注册的导入逻辑错误 #

你的Billings.vue采用的是默认导出：

export default {
  name: "billings",
}

但你在MemberEdit组件里错误地使用了命名导入的解构语法：

import {Billings} from '../components/Billings.vue' // 这是错误的写法！

Vue组件默认都是默认导出，只有命名导出（比如export const Billings = {}）才需要用{}解构导入。正确的导入方式应该去掉大括号：

import Billings from '../components/Billings.vue'

2. 全局注册已生效，无需重复局部注册 #

你已经在app.js里全局注册了billings组件：

Vue.component('member-edit', require('./components/MemberEdit.vue'));
Vue.component('billings', require('./components/Billings.vue'));

全局注册的组件会在所有子组件中自动可用，完全不需要再在MemberEdit里重复做局部注册——这一步不仅多余，还因为前面的导入错误导致局部注册失败，反而干扰了全局注册的生效判断。

3. 组件名的匹配逻辑没问题 #

全局注册时你用的组件名是全小写的billings，模板里写的<billings>完全对应；如果是局部注册驼峰名Billings，Vue也会自动转换成短横线分隔的billings，所以模板写法本身没有问题。

最终修复方案（二选一即可） #

方案一：保留全局注册，移除局部注册 #

1. 确认app.js里的全局注册路径正确（比如./components/Billings.vue确实指向目标文件）；
2. 删除MemberEdit组件里的import {Billings}...和components: { Billings }代码，直接在模板里用<billings>就好。

方案二：使用局部注册（取消全局注册） #

1. 删掉app.js里的Vue.component('billings', ...)这行代码（如果这个组件只需要在MemberEdit里用）；
2. 在MemberEdit组件里按正确方式导入并注册：

// MemberEdit.vue的script部分
import Billings from '../components/Billings.vue'

export default {
  components: {
    Billings,
  },
  // 其他业务代码
}

3. 模板里继续用<billings>或者改成<Billings>都可以（HTML不区分大小写，Vue会自动处理驼峰与短横线的转换）。

报错原因复盘 #

因为局部注册时的导入错误，导致Billings组件没有被正确引入，局部注册失效；如果此时全局注册的代码又因为路径/执行顺序等问题没生效，就会出现模板找不到<billings>组件的错误。

内容的提问来源于stack exchange，提问作者wenus