如何在 vue 3 中重用可组合的 props

Question

本质上，我想构建输入字段组件（textfeids、textarea、复选框等）。由于它们共享一些属性，即（id、名称等），因此我的方法是创建一个可组合项并定义通用的 prop 定义，然后在各个组件中使用它们。然而，它似乎确实有效。有没有办法可以在 vue 3 可组合方法中实现这一目标。下面是可组合的。

// prop definition
import { defineProps } from "vue";

export const useCoreFieldProps = () => {
  const props = defineProps<{
    id?: string;
    name?: string;
    disabled?: boolean;
    required?: boolean;
  }>();

  return {
    props,
  };
};

// composable usage
<script setup lang="ts">
import { useCoreFieldProps } from "@/composables/useFields";

const { props: coreProps } = useCoreFieldProps();

</script>

Answer 1

您可以仅返回对象，然后在组件中对其调用 DefineProps，而不是在可组合项中调用 DefineProps：

\n

// composable definition\n\nexport const useCoreFieldProps = () => {\n  const fieldProps = {\n    id?: string;\n    name?: string;\n    disabled?: boolean;\n    required?: boolean;\n  };\n\n  return {\n    fieldProps,\n  };\n};\n\n// composable usage\n<script setup lang="ts">\nimport { useCoreFieldProps } from "@/composables/useFields";\n\nconst { fieldProps } = useCoreFieldProps();\n\ndefineProps(fieldProps);\n\n// or add your own props or override:\ndefineProps({\n  ...fieldProps,\n  maxLength?: string,\n  pattern?: string\n});\n\n</script>\n

\n

如果您使用故事书或类似的组件库浏览工具，您将不幸地丢失道具的自动文档，但希望他们很快就会添加对此的支持。

\n

另一个选项是扩展，但文档 don\xe2\x80\x99t 真正解释了它如何在 Vue 3 中通过组合工作。

\n