Shulou(Shulou.com)06/02 Report--

This article mainly introduces what is the use of the props attribute of the components in vue. It is very detailed and has a certain reference value. Interested friends must read it!

Question 1: how exactly do you use props? What is the principle? Look down

1. [define 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. So since other components can be called, we need to define another props property to receive values passed in by other components.

Note: name, sex, and age in the component are all a prop, and putting the three attributes together is props, which is the origin of props, the plural form of prop, and represents a collection of multiple prop attributes.

2. [call component] at this time, we define an info component to display the basic information of this person, and display the implementation information of the call to the person group price, which is divided into the following four steps. And pass in parameters

3. [depending on the effect] the input is successful.

Question2: so if we want to add one year to our age, how do we achieve it?

We might just add 1 like this.

See if the effect can be achieved, become 19, look at the following picture is obviously incorrect. Because the age you pass in is a string 18, adding one will only be concatenated after 18.

Then some people say, "if you pass numbers, how do you pass numbers?" It's simple. One symbol is done.

We just need to put a colon in front of the age: he will only recognize what is inside the double quotation marks 18, otherwise he will recognize the double quotation marks 18.

If you look at the effect, it will be successful at this time.

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

It must be a numeric type, but someone who has to pass a string type will affect our calculation of age, such as adding 1 above. So how do we limit types?

At this point, props can no longer be defined with [], but {}, because when a type is restricted, props is used as an object.

Here are the restrictions on each of the three attributes.

After we restrict the age to the number type, we pass in the string 18 to see what happens.

At this point, it is found that the console will report an error, indicating that the data type of age does not match.

Although it does not affect the display, it will report an error. This can give us a clear hint. Convenient for us to standardize the incoming data.

Question 4: the type can be restricted, is it also possible to limit whether it must be passed on?

A: of course.

It is assumed that the name must be passed, and other names are not required.

Type property: type:xx

Required attribute: required:true

Default attribute: default:xx

Name must be passed, so let's try it if we don't pass it. If we don't pass the age, the default is 18.

As a result, the console also reports an error, indicating that name is a required attribute. We didn't pass the age, and what we successfully showed was the default value, 19 because we added 1 to the age at the beginning, so we succeeded in limiting the attribute.

To sum up the above:

While receiving data, props restricts the type of data, the specification of default values and the necessity of data.

Question 5: can the attribute values received by props be modified?

Answer: no

We add a button, as well as click events

Note: we need to access the property values in props through this. Can be found.

Look at the results and find that the page can be displayed, but the console reports an error, so it is unmodifiable

Question 6: what if you have to change the value of the props attribute?

Answer: modify indirectly through data

We redefine a variable in data to receive the props property. It is best not to use the same name for this variable. If you have the same name, get the value of the props attribute first, with priority props > data. Then when we operate or html bind values, we all manipulate the newly defined variables in data.

At this point, you can see that the modification was successful and no error was 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 the type: props: {"name": Number}

(3) specify the default value for the type and necessity of restriction:

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

Note: props is read-only, the bottom layer of vue will detect your changes to props, if you make changes, the console will report an error and must modify, copy a copy to data and modify the data through data.

The above is all the content of the article "what are the props properties of components in vue?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.