props configuration item
Create a student component (Student.vue)
<template>
<div>
<h2>Student information:{{name}}</h2>
<h2>Student gender:{{sex}}</h2>
<h2>Student age:{{age}}</h2>
</div>
</template>
<script>
export default{
name: 'Student',
data(){
return{
name: 'Zhang San',
sex: 'male',
age: 21
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div>
<Student></Student>
</div>
</template>
<script>
import Student from './components/Student.vue'
export default{
name: 'App',
components:{Student},
data(){
return{
}
},
}
</script>
<style>
</style>
Let's make one thing clear: what is the effect if your component is used multiple times?
<template>
<div>
<Student></Student>
<hr />
<Student/>
<hr />
<Student/>
</div>
</template>
You should note that these three components are three VueComponent , the three do not affect each other
One day, someone liked my component and wanted to take it to use or display these information names, but my information is different from yours; Everything is the same, but the data inside is different. Others also use my components, but how to transfer the data?
You have to let others bring their data to your Student component from the outside
How do you transfer data?
First of all, you must do a preparatory work in your Student component: (1) you should not write the values of name, sex and age, or you will die
<template>
<div>
<h1 v-text="msg"></h1>
<h2>Student information:{{name}}</h2>
<h2>Student gender:{{sex}}</h2>
<h2>Student age:{{age}}</h2>
</div>
</template>
<script>
export default{
name: 'Student',
data(){
return{
msg: 'I am a B Station user'
}
}
}
</script>
<style>
</style>
There must be an error: no name, sex, age; Then find the component tag (in App.vue)
App.vue
<template>
<div>
<Student name="Li Si" sex = "female" age="19"/>
</div>
</template>
Or an error is reported: no name, sex, age
Not only do you have to pass values, you also have to 'say it' in the component (Student.vue): I want to use the passed things. How do I say this?
You have to use props
Simple claim receipt
props:['name','sex','age']//Simple claim receipt
The order doesn't matter, as long as it can be up
This makes it more playable:
- I have components
- I have a template
- I have a style
- I have interaction (script, props)
<template>
<div>
<Student name="Li Si" sex = "female" age="19"/>
<Student name="bachelor" sex="male" age="20"/>
</div>
</template>
Components are reused and data is dynamic
But there's a hole in it
I put forward a demand: Li Si, the real age is indeed 19, but the requirement is that Li Si is not allowed to be 19, but 20, one year older than the real age; It's 18. It's 19
If it is:
<h2>Student age:{{age+1}}</h2>
result:
Student age:191
One question:
props:['name','age','sex'],
Where is the value of this (where do you save it for me)?
In fact, it is stored in the VueComponent of this component
There was a saying before: in the template, you can automatically see the properties in the Vue instance object (vm); Now it's not vm but component
If not, an error will be reported, because there is no name,age and sex in your VueComponent, only msg. If you add the above statement, you will magically find that name,age and sex appear in your VueComponent, because they come in through props_ There is only msg in data. Vue's developer tool will help you distinguish props configuration from data configuration
Why is your 19 + 1 not 20
Because the 19 you passed is a string type 19
- You can cast:
<h2>Student age:{{age*1+1}}</h2>
But this is not the most standard
- The most standard character type is 19
<Student name="Li Si" sex = "female" :age="19"/>
: can solve the problem, principle:
: is the abbreviation of v-bind. The value of age is the result of running the js expression in ''
If others forget: can you limit it
Let's make an analogy
<Student name="Li Si" sex = "female" :age="19"/>
Is the payer
props:['name','age','sex']//Simple claim receipt
This is the payee
The best treatment is that when the receiver receives things, you don't accept everything. If you meet the conditions, you can collect again. If you don't meet the conditions, you (1) should collect and tell you that the Dingxi is wrong (2) don't collect, so you can't write so
Limit the type of data while receiving
//Limit the type of data while receiving
props:{
name:String,
age: Number,
sex: String,
},
The meaning of this is: I really need to be subject to name, age and sex, but I also need to limit their types (that is, write the built-in constructor that already exists in js)
There is another configuration form:
At the same time of receiving, the data type is limited + the default value is specified + the necessity is limited
//At the same time of receiving, the data type is limited + the default value is specified + the necessity is limited
props:{
name:{
type: String,//Property, where String is a String
required: true//The required true indicates that this attribute must be passed
},
age:{
type: Number,
default: 99//Default value. Directly assign 99 without transmission
},
sex:{
type: String,
required: true
}
}
Three elements:
- Type: configuration type
- required: is it necessary to configure this property
- Default: if you don't pass it, I'll give you a default value
In general, required and default do not appear at the same time
props and prop s:
prop means attribute
props is the attribute (prop) that receives your message
Under development First kind This form is often used
But for the components related to money and some necessary scenarios, you'd better configure it in detail( At the same time of receiving, the data type is limited + the default value is specified + the necessity is limited)
Another question
If I Blind declaration For example:
props:['name','age','sex','phone']
You haven't configured phone, and no error is reported, but you also have phone in VueComponent, but the value is undefined
Another detail is:
Received props It can't be changed
verification:
<button @click="updateAge">
Try to modify the age
</button>
methods: {
updateAge(){
this.age = 22
}
},
Result: it can be changed, but it's best not to change it
[Vue warn]: Avoid mutating a prop directly
If you must modify the value:
Note: the data name in data should not be the same as the attribute name in props, otherwise it will conflict. It is mainly transmitted from the outside (the priority of props is higher than that of data). You can use the priority
export default{
name: 'Student',
data(){
console.log(this)
return{
msg: 'I am a B Station user',
MyName:this.name
}
},
props:['name','age','sex'],//Simple claim receipt
}
Similarly:
data(){
return{
...
MyAge: this.age
}
}
The data in props is received first and placed on VueComponent first, so you can read this p age in data
It needs to be modified:
<template>
<div>
<h1 v-text="msg"></h1>
<h2>Student information:{{name}}</h2>
<h2>Student gender:{{sex}}</h2>
<h2>Student age:{{MyAge}}</h2>
<button @click="updateAge">Try to modify Age</button>
</div>
</template>
<script>
export default{
name: 'Student',
data(){
console.log(this)
return{
msg: 'I am a B Station user',
MyAge:this.age
}
},
methods: {
updateAge(){
this.MyAge++
}
},
props:['name','age','sex'],//Simple claim receipt
}
</script>
<style>
</style>
Another point is: not everything can be passed on
For example, 'key'
There is also a default problem
verification:
App.vue
<template>
<div>
<Student name="Li Si" sex = "female" />
<!-- <Student name="bachelor" sex="male" age="20"/> -->
</div>
</template>
<script>
//Introducing School components
import School from './components/School.vue'
import Student from './components/Student.vue'
export default{
name: 'App',
components:{School,Student},
data(){
return{
msg: 'Welcome to study Vue',
}
},
}
</script>
<style>
</style>
Student.vue
<template>
<div>
<h1 v-text="msg"></h1>
<h2>Student information:{{name}}</h2>
<h2>Student gender:{{sex}}</h2>
<h2>Student age:{{MyAge}}</h2>
<button @click="updateAge">Try to modify Age</button>
</div>
</template>
<script>
export default{
name: 'Student',
data(){
console.log(this)
return{
msg: 'I am a B Station user',
MyAge:this.age
}
},
methods: {
updateAge(){
this.MyAge++;
}
},
//props:['name','age','sex'], / / simply declare receipt
//Limit the type of data while receiving
/* props:{
name:String,
age: Number,
sex: String,
}, */
//At the same time of receiving, the data type is limited + the default value is specified + the necessity is limited
props:{
name:{
type: String,//Property, where String is a String
required: true//The required true indicates that this attribute must be passed
},
age:{
type: Number,
default: 99//Default value. Directly assign 99 without transmission
},
sex:{
type: String,
required: true
}
}
}
</script>
<style>
</style>
summary
Configure props
Function: let components receive external data
(1). Transfer data:
<Demo name="xxx"/>
(2). Receive data:
The first method (receive only):
props:['name']
The second method (restriction type):
props:{name:String}
The third method (restriction type, restriction necessity, specifying default value):
props:{name:{type:String, / / type
required:true, / / necessary
Default: 'Lao Wang' / / default value
}
}
remarks: props is read-only , the Vue bottom layer will detect your changes to props. If you make changes, you will issue a warning. If the business requirements really need to be modified, please copy the contents of props into data, and then modify the data in data.