Let's talk in detail about the props attributes of components in Vue

Today's article will help you learn props thoroughly...

Props is mainly used to pass values ​​to components. Its job is to receive data from the outside. It is a configuration item at the same level as data, el, and ref.

Question 1: How are props used specifically? What is the principle? Look down

1. [Define the called component] First, we define a person component, which is used to display personal information. We put a person's name, gender, and age. After defining this component, we can wait for other components to call it. Now that other components can call it, we need to define a props attribute to receive the values ​​passed in by other components.

Note: name, sex, and age in the component are all one prop. Putting the three properties together is props. This is the origin of props. It is the plural form of prop and represents a collection of multiple prop attributes.

2. [Calling component] At this point, we define another info component to display the basic information of the person, and call the person component to display the information. The call is divided into four steps as shown in the figure below. And pass in parameters

3. [See the effect] The data is transferred successfully.

Question 2: What if we want to add 1 year to the age? How can we do that?

We might just add 1 like this

Let's see if the effect can be achieved. It becomes 19. As shown in the figure below, it is obviously incorrect. Because the age you passed in is a string 18, adding 1 will only be concatenated after 18.

Then some people asked, how do we transmit numbers? It’s very simple, just one symbol.

We just need to add a colon in front of age : it will only recognize the content inside the double quotes 18, otherwise it will recognize the double quotes 18

Look at the effect, it is successful now.

Question 3: For the age type, what type of data do we most want to get?

It must be a numeric type, but if someone insists on passing a string type, it will affect our calculation of age, such as adding 1 above... So how do we limit the type?

At this time, props can no longer be defined with [], but with {} , because when restricting the type, props is used as an object;

Below we restrict the three attributes separately.

After we restrict the age to number type, and then pass in the string 18, what changes will occur?

At this time, the console will report an error, indicating that the data type of age does not match.

Although it does not affect the display, an error will be reported. This can give us a clear hint. It is convenient for us to standardize the incoming data.

Question 4: If we can restrict the type, can we also restrict whether it must be transmitted?

A: Of course.

Assume that the name must be transmitted, but the others are not required.

Type attribute: type:xx

Required attributes: required: true

Default properties: default: xx

Name must be passed, so let's try without passing it. If age is not passed, it will be assumed to be 18.

As a result, the console also reports an error, prompting that name is a required attribute. We did not pass the age, and the default value was successfully displayed. 19 is because the age was increased by 1 at the beginning, so we successfully restricted the attribute.

To summarize the above:

When receiving data, props also restricts the data type, specifies the default value, and restricts the necessity.

Question 5: Can the property values ​​received by props be modified?

A: No

We add a button and a click event

Note: We need to access the property values ​​in props, which can be found through this.

Check the results and find that the page can be displayed, but the console reports an error, so it cannot be modified

Question 6: What should I do if I need to modify the props attribute value?

Answer: Modify indirectly through data

We redefine a variable in data to receive the props attribute. It is best not to have the same name for this variable. If it has the same name , the props attribute value will be obtained first, with the priority of props>data . Then when we operate or bind values ​​in html, we operate the newly defined variables in data

At this point you can see that the modification was successful and no errors were reported:

Summary: Configuration item props

-------Let the component receive data from the outside

There are three ways to receive data:

(1) Only receive: props: ['name', 'age', 'sex']

(2) Receive and restrict types: props: { "name": Number }

(3) Specify the default values ​​for restriction type and restriction necessity:

    props:{
        "name":{
            type:String,
            required:true
        },
        "age":{
            type:Number,
            default:18
        },
        "sex":{
            type:String,
            default:'male'
        },
    },

Note: props is read-only. The underlying Vue will detect your changes to props. If you make any changes, the console will report an error. If you must modify it, copy a copy to data and modify the data through data.

This is the end of this article about the props attribute of vue components. For more information about the props attribute of vue components, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!