vue.js - SFC `<script setup>` 如何用vue3提取常用 Prop

Question

有时我们可以使用 props 提取常用 Prop 在 defineComponent功能如下。两者都适用于 vue2/vue3，但不适用于 SFC。

// common-props.js
export default {
  commonProps: {
    enabled: Boolean,
    readonly: Boolean,
  }
}

// my-component.vue
import { commonProps } from './common-props';

export default {
  props: {
    ...commonProps,
    visible: Boolean,
    text: {
      type: String,
      default: '',
    }
  }
};

但是当我升级到 <script setup> . props由 defineProps 定义这是一个编译器宏。我必须尝试使用​​ typescript 扩展 Prop 如下。但是从 DevTools 中看不到混合的 Prop 。

// common-props.ts
export interface CommonProps{
  enabled?: boolean,
  readonly?: boolean,
}

//  my-component.vue
<script setup lang="ts">
import CommonProps from './common-props';

interface MyComponentProps extends CommonProps {
  visible?: boolean,
  text?: string,
}

const props = withDefaults(defineProps<ICheckBoxProps>(), {
  visible: false,
  text: '',
});

</script>

我的问题是如何从 SFC 组件中提取 Prop 。并使 Vue Devtools 可以识别提取的 Prop 。

Answer 1

Type-only props/emit declarations

As of now, the type declaration argument must be one of the followingto ensure correct static analysis:

1. A type literal
2. A reference to an interface or a type literal in the same file

Currently complex types and type imports from other files are notsupported. It is theoretically possible to support type imports in thefuture

所以简短的回答是否定的，目前在使用 Type-only props declaration 时无法使用导入类型

但是您仍然可以在 脚本设置 中使用非类型(基于对象)的 prop 声明

// CommonProps.js
export default {
    enabled: Boolean,
    readonly: Boolean,
}

// Component.vue
<script setup lang="ts">
import {ref} from "vue";
import CommonProps from "./CommonProps.js"
  
const props = defineProps({
  ...CommonProps,
  items: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <pre>{{ props }}</pre>
</template>

Demo