Props argument in default argument of a prop

[Starlord48]

props: {
prop: {
type: String,
default: function(props:Record<string, any>){}
}
}

what is the reason we have the props as an argument in default. We tried to replace the defaults of the props using another prop.

So the use case goes like this, we have a prop that determine the type of a chart and we have prop map of each type. So the type prop is used to determine the default value of the other props. So we tried to utilise the props argument in the default function to access the type prop and setting the default of the other props.

function getDefaultProp(props:Record<string, any>,name:string,defaultValue?:any):any {
let displayType = props.displayType;

let config = propMap[displayType];
if(config && config.props && name in config.props){
    defaultValue = config.props[name];
}
if(isFunction(defaultValue)){
    return defaultValue(props);
}

return defaultValue;

}

export const props = {
displayType: { type: String, required: true },
.
.
.
}

for(let name in props) {
let value = props[name];
const def = extend({},value);
def.default =()=>undefined;
propsWithoutDefault[name] = def;
if(name ==="displayType"){
continue;
}
if (!value || !value.type) {
Logger.fatal(Prop '${name}' type is not defined inside object. for flo chart it is mandatory to define the prop as <prop_name> : { type : <String|Number| etc>}. );
continue;
}

let defaultValue = value.default;
value.default=function(props:Record<string, any>){
    return getDefaultProp(props,name,defaultValue)
}

}

[YitzhakMizrahi]

The props argument exists so a default factory can look at the raw props that were passed into the component.

That means your use case is valid in principle: a default for one prop can be derived from another prop such as displayType.

The important caveat is that this argument is the raw props object, not the fully resolved props object. So it is useful for checking values the parent actually passed, but you should not rely on other props already having their own defaults applied.

A smaller version of the pattern would be:

props: {
  displayType: {
    type: String,
    required: true,
  },
  chartConfig: {
    type: Object,
    default(rawProps: Record<string, unknown>) {
      const displayType = rawProps.displayType as string | undefined
      return displayType && propMap[displayType]
        ? propMap[displayType].chartConfig
        : {}
    },
  },
}

So the reason Vue passes props is exactly to replace the old Vue 2 pattern of reading this inside default functions. In Vue 3, default factories do not have component instance access, because props are resolved before the component instance exists.

For your generated/default-wrapping approach, I would keep two rules:

• Only depend on props that are required or explicitly passed by the parent, like displayType.
• Do not depend on another prop default having already run, because defaults are not meant to be an ordered dependency graph.

Docs: https://vuejs.org/guide/components/props.html#prop-validation