Props with Default Values

Show how to specify default values for props in a Vue.js 3 component if no value is provided by the parent.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Default Title'
    },
    message: {
      type: String,
      default: 'Default message content'
    }
  }
}
</script>

<style>
h1 {
  color: #333;
}
p {
  color: #666;
}
</style>

In this Vue.js component, default values for the 'title' and 'message' props are set using the 'default' property inside the 'props' option. If the parent does not provide a value for the 'title' or 'message' props, the component will use 'Default Title' and 'Default message content' as default values, respectively.