vue js default prop

In Vue.js, default props can be set for a component using the default property in the props object. Here are the steps to set a default prop in Vue.js:

1. Inside the component's options object, define the props property. This property should be an array or an object, depending on the desired prop types.

2. Within the props array or object, define the props you want to set default values for. Each prop should be represented as a string in the array or as a key-value pair in the object.

3. To set a default value for a prop, use the syntax propName: { default: defaultValue }. Replace propName with the name of the prop you want to set a default value for, and defaultValue with the desired default value.

4. Save the component file and run your Vue.js application. The component will now use the default value for the prop if no value is passed from its parent component.

Here's an example of setting a default prop in Vue.js:

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

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello, world!' // Default value for the 'message' prop
    }
  }
}
</script>

With the above example, if the parent component doesn't pass a value for the message prop, the child component will display "Hello, world!" as its default value.