Vue报错：Unknown custom element: <IncomeList> 组件注册问题求助

问题根源 #

你在Vue3选项式API的使用中，错误地将组件通过setup函数的返回值暴露给模板，而非在components选项中注册局部组件。Vue要求局部组件必须在组件选项的components对象中声明，才能在模板中正常识别使用。

修复步骤 #

1. 修正App.vue的组件注册 #

修改App.vue的<script>部分，添加components选项来注册导入的组件，同时移除setup返回中的组件引用：

<script>
import { reactive, computed } from 'vue';
import Header from './components/Header';
import Form from './components/Form';
import IncomeList from './components/IncomeList';
export default {
  // 新增components选项，注册局部组件
  components: {
    Header,
    IncomeList,
    Form
  },
  setup () {
    const state = reactive({
      income: [],
      sortedIncome: computed(() => {
        let temp = [...state.income]; // 修复：避免sort修改原数组（sort为原地排序）
        temp.sort(function (a, b) {
          return b.date - a.date;
        });
        return temp;
      }),
      totalIncome: computed(() => {
        // 简化计算逻辑：用reduce替代循环
        return state.income.reduce((total, item) => total + item.value, 0);
      })
    });
    function AddIncome(obj) {
      let d = obj.date.split("-");
      // 修复：Date的月份参数是0基（0=1月），需转数字后减1
      let newD = new Date(d[0], parseInt(d[1]) - 1, d[2]);
      state.income = [...state.income, {
        id: Date.now(),
        desc: obj.desc,
        value: parseInt(obj.value),
        date: newD.getTime()
      }]
    }
    function removeItem(id) {
      state.income = state.income.filter(v => v.id !== id);
    }
    // 仅返回状态和方法，无需返回组件
    return {
      state,
      AddIncome,
      removeItem
    }
  }
}
</script>

2. 修正IncomeList.vue的组件注册 #

IncomeList.vue中同样需要注册IncomeItem组件，添加components选项：

<script>
import IncomeItem from './IncomeItem';
export default {
  components: {
    IncomeItem
  },
  props: {
    state: Object
  },
  setup (props, { emit }) {
    function removeItem(id) {
      emit( 'remove-item', id );
    }
    // 无需返回IncomeItem组件
    return {
      removeItem
    }
  }
}
</script>

额外优化提示 #

• sortedIncome计算属性中，避免直接对state.income调用sort（会修改原数组），先通过扩展运算符复制数组再排序
• 日期处理时，注意new Date的月份参数是0起始，需要将字符串月份转数字后减1，否则会导致月份偏移
• 用reduce简化totalIncome的计算逻辑，代码更简洁高效

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