How do I set default values for props in Vue 3?

How do I set default values for props in Vue 3?

In Vue 3, you can set default values for props by using the default property in the props option. For example:

props: {
  myProp: {
    type: String,
    default: 'default value'
  }
}

Can I set default values for multiple props?

Yes, you can set default values for multiple props by defining each prop with its own default value in the props object. For example:

props: {
  propA: {
    type: Number,
    default: 10
  },
  propB: {
    type: String,
    default: 'Hello'
  }
}

What happens if I don't provide a default value?

If you don't provide a default value for a prop and the parent component does not pass that prop, it will be undefined in the child component.

Can I use a function to set a default value?

Yes, you can use a function to set a default value, especially for objects or arrays. Just return the value from the function:

props: {
  myArray: {
    type: Array,
    default: () => []
  }
}