How do I set default props in Vue 3?

How do I set default props in Vue 3?

In Vue 3, you can set default props by defining a default property in the props option of your component.

Can you show me an example?

Sure! Here's a simple example:

export default {
  props: {
    myProp: {
      type: String,
      default: 'Default Value'
    }
  }
}

This sets 'Default Value' as the default for myProp.

What if I want to set a default value based on another prop?

You can use a function for the default value. For example:

export default {
  props: {
    myProp: {
      type: String,
      default: () => 'Default Value'
    },
    anotherProp: {
      type: String,
      default: () => 'Another Default'
    }
  },
  computed: {
    computedProp() {
      return this.anotherProp || this.myProp;
    }
  }
}

This way, computedProp will use anotherProp if it's provided, otherwise it will fall back to myProp.