How can I dynamically set the default value when use defineProps Api

[ngd-b]

Since unpassed bool type fields in vue are set to false by default. It is necessary to set default values for bool type fields.

const props = withDefaults(defineProps<TitleOptions>(), {
  show: true,
  triggerEvent: false,
});

However, I have encapsulated a public component, and the default values will be different. I cannot determine in the parent component whether it is a value passed in by the user or vue's own default value, So provide the default value through provide/inject initializaion and initialize it dynamically in the component,

const { defaultTextProps = {} } = useText();

const props = withDefaults(defineProps<TextOptions & { prop: TextType }>(), {
  prop: "textStyle",
  ...defaultTextProps,
});

but it reports an error when accessing the page. there is no error prompt in the code.

`defineProps()` in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead.

How should I deal with it.
Thanks!

[skirtles-code]

You can use a factory function for the default, which can call inject:

• Playground

withDefaults(defineProps<{ foo?: number }>(), {
  foo() {
    return inject('defaultFoo', 3)
  }
})

I don't think there's a way to set all the defaults in one go, you'd need to have a separate function for each prop. e.g.:

const props = withDefaults(defineProps<TextOptions & { prop: TextType }>(), {
  prop: "textStyle",
  foo: () => useText().defaultTextProps.foo,
  bar: () => useText().defaultTextProps.bar
});

[ngd-b]

the TextOptions is a union type. and it is not certain which field should be set to a default value.
If I list all the fields. and then there will be a filed value for a type that has no field.