1 简介
props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项
2 一个简单示例
1）StudentComp.vue
<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age}}</h1>
</div>
</template>
<script>
export default {
name:'StudentComp',
data(){
return {
stname:'学生' ,
age:18
}
}
}
</script>
2）SchoolComp.vue
<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp></StudentComp>
</div>
</template>
<script>
import StudentComp from './StudentComp'
export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1'
}
},
components:{
StudentComp
}
}
</script>
<style>
</style>
3）app.vue
<template>
<div>
<SchoolComp></SchoolComp>
</div>
</template>
<script>
import SchoolComp from './components/SchoolComp'
export default {
name:'App',
components:{
SchoolComp
}
}
</script>
页面效果
3 一个需求引出props
在上面示例的基础上，要求StudentComp组件里面的stname和age不是固定的，而是引用StudentComp组件的那个组件来决定值，这时候可以使用props属性
1）修改StudentComp.vue,添加props属性，去掉data里面的stname和age值
<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age}}</h1>
</div>
</template>
<script>
export default {
name:'StudentComp',
data(){
return {
}
},
props:['stname','age']
}
</script>
2）修改SchoolComp.vue，在StudentComp 标签添加stname和age属性，就可以把值传到StudentComp里面去了
<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp stname="学生" age="18" ></StudentComp>
</div>
</template>
<script>
import StudentComp from './StudentComp'
export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1'
}
},
components:{
StudentComp
}
}
</script>
<style>
</style>
3）效果
4 props的三种写法
4.1 最简数组写法
只定义参数名
props:['stname','age']
4.2 对象写法
定义参数名和类型
props:{
stname:String,
age:number
}
4.3 完整写法
可定义类型，是否必传，默认值
props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值
}
}
5 关于非字符串类型传值的问题
1) StudentComp.vue
<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age}}</h1>
</div>
</template>
<script>
export default {
name:'StudentComp',
data(){
return {
}
},
props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值
}
}
}
</script>
2) SchoolComp.vue
<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp stname="学生" age="18" ></StudentComp>
</div>
</template>
<script>
import StudentComp from './StudentComp'
export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1'
}
},
components:{
StudentComp
}
}
</script>
<style>
</style>
3)效果
发现{{age + 1}}在页面显示181，因为18它是字符串，age+1就是字符串拼接，就是181了
4 ） 问题
发现控制台报错，因为SchoolComp.vue那里通过属性传值，age="18"，它会认为18是个字符串，页面就是181了
5）解决方案
通过v-bind来设置age属性 :age="18"，这样子，age属性里面的18会被按照表达式来解析，18就会作为数字了
<StudentComp stname="学生" :age="18" ></StudentComp>
6）效果
6 props和data里面属性不允许重名
因为props和data里面的属性都会在组件对象上面，所以是不允许重名的
在StudentComp.vue的data里面加一个属性stname，启动报错
<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age + 1}}</h1>
</div>
</template>
<script>
export default {
name:'StudentComp',
data(){
return {
'stname':'小学生'
}
},
props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值
}
}
}
</script>
7 props里面的属性的值的修改
7.1 在StudentComp里面修改
添加一个按钮
点击事件中去修改age的值
<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age + 1}}</h1>
<button v-on:click="cli">点击</button>
</div>
</template>
<script>
export default {
name:'StudentComp',
data(){
return {
}
},
props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值
}
},
methods: {
cli(){
this.age = 20
}
}
}
</script>
发现报错，子组件默认不能修改父组件传的props值
7.2 SchoolComp里面修改
添加一个按钮
点击事件中去修改age的值
<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp stname="学生" :age="age" ></StudentComp>
<button v-on:click="cli">点击</button>
</div>
</template>
<script>
import StudentComp from './StudentComp'
export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1',
age:18
}
},
components:{
StudentComp
},methods: {
cli(){
this.age = 20
}
}
}
</script>
<style>
</style>
点击按钮，值改变
在传值的组件中可以修改