Implementation of the method of setting default value in Vue3

In Vue3, we often need to usedefinePropsTo define the properties of the component, but how to set the default values ​​of these properties?

This is a common problem, especially during development, we want to be able to provide some default values ​​for the properties of the component so that there is a good alternative when the property value is not passed. In this article, I will explain how to use it in Vue3definePropsTo set the default value.

First, let's reviewdefinePropsBasic usage of  .definePropsAllows us to define props in the component and can specify their types, default values ​​and other properties.

Here is a simple example:

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
  props: {
    message: String
  },
  setup(props) {
    return { 
      // access props here
      msg:  
    };
  },
  template: `
    <div>
      {{ msg }}
    </div>
  `
});

In this example, we define a name calledmessageThe prop of  , its type isString. However, if the component is not passed when callingmessageWhat will happen to the attributes? At this time, we need to set the default value.

In Vue3, we can use thedefinePropsprovides default values ​​for each property to achieve this. Here is an example:

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
  setup() {
    // Define props with default values
    const props = defineProps({
      message: {
        type: String,
        default: 'Hello, liangyueqi!' // Default value
      }
    });

    return { 
      // access props here
      msg:  
    };
  },
  template: `
    <div>
      {{ msg }}
    </div>
  `
});

In this example, we usedefinePropsto define the props of the component and tomessageAttributes provide default values'Hello, World!'. In this way, when the component is called, if not passedmessageProperties, the component will display the default message.

In addition to providing basic default values, we can also use functions to set default values ​​dynamically. For example, if we want the default message to vary based on certain conditions, we can do this:

const MyComponent = defineComponent({
  setup() {
    // Define props with dynamically calculated default value
    const props = defineProps({
      message: {
        type: String,
        default: () => {
          if (someCondition) {
            return 'Hello, Java wheel!';
          } else {
            return 'Liang Yueqi!';
          }
        }
      }
    });

    return { 
      // access props here
      msg:  
    };
  },
  template: `
    <div>
      {{ msg }}
    </div>
  `
});

In this example, we use a function to calculate the default value dynamically. According to the conditionssomeConditionDifferent, we return different default messages.

In general, thedefinePropsProvides flexible ways to define the properties of components and can easily set default values. By setting default values, we can ensure that the component works properly and has reasonable default behavior even if the user does not pass attribute values.

This is the article about the method of setting default values ​​in Vue3. For more related content on setting default values ​​in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!