Vue 代码错误分析与解决方案

目录

一、问题描述

二、问题分析

（一）Property 'buttonText' does not exist on type 错误

（二）A module cannot have multiple default exports 错误

三、解决方案

在 Vue 开发过程中，遇到了一个比较有趣的错误，在此记录下来，希望能帮助到遇到类似问题的开发者。

一、问题描述

在使用 Vue 进行组件开发时，编写了以下代码：

<template>
  <a-button type="primary">{{ buttonText }}</a-button>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'BaseButton',
  props: {
    buttonText: {
      type: String,
      default: 'Click me',
    },
  },
});
</script>

此时，出现了两个错误：

1. Vue: Property 'buttonText' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;... 11 more...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R? (args_0: R, args_1: R, args_2: OnCleanup) => any : (args_0: any, args_1: any, args_2: OnCleanup) => any): void; $emit<K extends string | symbol>(event: K,...args: any[]): void;... 4 more...; $el: Element | null; }'.
2. Vue: A module cannot have multiple default exports.

二、问题分析

（一）Property 'buttonText' does not exist on type 错误

在使用<script setup>语法糖时，组件的类型推断可能会出现问题。当使用这种语法糖时，Vue 的类型系统可能无法正确地识别从父组件传递过来的props。在上述代码中，虽然在props选项中定义了buttonText，但在类型推断中，它没有被正确地识别为组件的属性。

（二）A module cannot have multiple default exports 错误

在 TypeScript 中，一个模块只能有一个默认导出。在上述代码中，使用了<script setup>语法糖，同时又显式地使用export default defineComponent({...})进行了默认导出，这就导致了冲突。

三、解决方案

方案一：去掉<script setup>

当把<script setup>去掉后，代码变为传统的组件定义方式，此时不再报错。其原因如下：

去掉<script setup>后，组件的定义回归到了传统的方式，在这种方式下，Vue 的类型推断系统能够更加准确地识别出props的定义。因为在传统的组件定义中，props的定义更加明确和直接，不会出现使用<script setup>时可能出现的类型推断不准确的情况。同时，去掉<script setup>后，也避免了出现多个默认导出的冲突，因为在传统定义方式中，只有一个export default defineComponent({...})的默认导出，符合 TypeScript 的模块导出规范。

修改后的代码如下：

<template>
  <a-button type="primary">{{ buttonText }}</a-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'BaseButton',
  props: {
    buttonText: {
      type: String,
      default: 'Click me',
    },
  },
});
</script>

方案二：使用 defineProps 函数明确指定 props

在使用<script setup>语法糖的情况下，可以使用defineProps函数来明确指定props，这样可以解决类型推断的问题。修改后的代码如下：

<template>
  <a-button type="primary">{{ buttonText }}</a-button>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
const props = defineProps({
  buttonText: {
    type: String,
    default: 'Click me',
  },
});
</script>

通过这个问题的解决，我们可以更加深入地理解 Vue 和 TypeScript 在组件开发中的一些细节和规范。在开发过程中，遇到错误时，仔细分析错误信息，结合相关的技术文档和知识，往往能够找到有效的解决方案。

希望这篇博客能对大家在 Vue 开发中遇到类似问题时提供一些帮助。