功能:让组件接收外部传过来的数据
1. 传递数据:<Demo name="xxx" />
2. 接收数据:
(1)只接收:
props:['name']
(2)限制类型:
props:{
name: Number
}
(3)限制类型、限制必要性、指定默认值:
props:{
name:{
type:String, //类型
required: true, //必要性
default: '老王', //默认值
}
}
举例说明:
**App.vue**
<template>
<div>
<Student :name="陈慕夏" :sex="女" :age="16"/>
</div>
</template>
<script>
import Student from './components/Student'
export default {
name: 'App',
components:{
Student
}
}
</script>
**Student.vue**
<template>
<div>
<h2>学生名称:{{ name }}</h2>
<h2>学生性别:{{ sex }}</h2>
<h2>学生年龄:{{ age+1 }}</h2>
<h2>学生年龄:{{ myAge+1 }}</h2>
<button @click="updateAge">尝试修改接收到的年龄</button>
</div>
</template>
<script>
export default {
name: 'Student',
data(){
return{
msg:'我是一名清华大学的学生',
myAge:this.age
}
},
methods:{
updateAge(){
this.age = 199
this.myAge++
},
}
//简单声明接收
props:['name','age']
//接收的同时对数据的类型进行限制
props:{
name:String,
sex:String,
age:Number
}
//接收的同时对数据的类型进行限制+默认值的指定+必要性的限制
props:{
name:{
type:String, //name的类型
required:true, //name必要的
},
sex:{
type:String, //name的类型
required:true, //name必要的
},
age:{
type:Number,
default:16 //默认值
}
}
}
</script>
注意⚠️:
(1) props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,
若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据
(2) 同时props里的数据是优先被接收的,data是后初始化的
配置项:props
于 2022-10-11 15:31:09 首次发布