How do I use default props in Vue 3?

How do I use default props in Vue 3?

In Vue 3, you can define default props in your component by using the default property in the props option.

Can you show me an example?

Sure! Here's a simple example:

export default {
  props: {
    message: {
      type: String,
      default: 'Hello, World!'
    }
  }
}

This sets a default value for the message prop.

What if I want to use a function to set the default value?

You can use a function to return the default value like this:

export default {
  props: {
    count: {
      type: Number,
      default: () => 0
    }
  }
}

This way, each instance of the component gets its own default value.

Can I override the default prop value?

Yes, you can override the default prop value by passing a different value when you use the component, like this:

<my-component :message="'New Message'" />