props
- 父组件给子组件传值
- 父组件：在组件元素中配置要传递的属性和值
- 子组件，配置props数据，接收父组件传递的属性
App.vue，该文件为父组件
<template>
<div>
<!-- 组件标签写标签属性-->
<!-- 父组件给子组件（Student ）传递属性（name）和值（高高） -->
<Student name="高高" sex="男" age="18"></Student>
</div>
</template>
<script>
import Aaa from './components/Student.vue'
export default {
name: "App",
components:{
Student:Aaa
}
}
</script>
- App.vue，该文件为父组件，在父组件配置如下：
<Student name="高高" sex="男" age="18"></Student>
Student.vue 子组件接收，用prop整个属性接收
- 第一种写法
<template>
<div>
<h1>{{msg}}</h1>
<h2>姓名：{{name}}</h2>
<h2>性别：{{sex}}</h2>
<h2>年龄：{{age}}</h2>
</div>
</template>
<script>
export default {
data(){
return {
msg:"欢迎"
}
},
// 第一种写法：
props: ['name','sex','age']
}
</script>
- // 第一种写法：
props: ['name','sex','age']
- 第二种写法
<template>
<div>
<h1>{{msg}}</h1>
<h2>姓名：{{name}}</h2>
<h2>性别：{{sex}}</h2>
<h2>年龄：{{age}}</h2>
</div>
</template>
<script>
export default {
data(){
return {
msg:"欢迎"
}
},
// 第一种写法：
// props: ['name','sex','age']
// 第二种写法：限制父组件传过来的类型
props:{
name:String,
sex:String,
age:Number
}
}
</script>
-
报了一个错：
props类型报错.PNG
因为我们限制了类型，子组件要求传过来的值要是数字，但是父组件App.vue传过来的值是这样的<Student name="高高" sex="男" age="18"></Student>
age="18" 还是字符串类型，我们要把它变成数字类型，那么给age前面属性添加冒号:age="18",那么age等号右边的内容就变成了js表达式，这时候18就变成了数字类型
App.vue修改如下
<template>
<div>
<!-- 子组件传递属性和值 -->
<Student name="高高" sex="男" :age="18"></Student>//添加了:
</div>
</template>
<script>
import Aaa from './components/Student.vue'
export default {
name: "App",
components:{
Student:Aaa
}
}
</script>
- 第三种写法
<template>
<div>
<h1>{{msg}}</h1>
<h2>姓名：{{name}}</h2>
<h2>性别：{{sex}}</h2>
<h2>年龄：{{age}}</h2>
</div>
</template>
<script>
export default {
data(){
return {
msg:"欢迎"
}
},
// 第一种写法：
// props: ['name','sex','age']
// 第二种写法：限制父组件传过来的类型
// props:{
// name:String,
// sex:String,
// age:Number
// }
// 第三种写法：限制父组件传过来的类型、是否必填、是否有默认值
props:{
name: {
type:String,//传过来的类型
require:true//是否必填
},
sex: {
type:String,
// default:'男',//是否有默认值,这个和是否必填冲突，两者选一个
require:true//是否必填
},
age: {
type:Number,
default:33//是否有默认值,
}
}
}
</script>
- 不要修改父组件传过来的值，要是真要修改，就赋值给data里的某个变量作为中间变量，再对中间变量修改，props先接收值
<template>
<div>
<h1>{{msg}}</h1>
<h2>姓名：{{name}}</h2>
<h2>性别：{{sex}}</h2>
<h2>年龄：{{myAge}}</h2>
<button @click="change">修改年龄</button>
</div>
</template>
<script>
export default {
data(){
return {
msg:"欢迎",
myAge:this.age//接收父组件年龄
}
},
// 第一种写法：
// props: ['name','sex','age']
// 第二种写法：限制父组件传过来的类型
// props:{
// name:String,
// sex:String,
// age:Number
// }
// 第三种写法：限制父组件传过来的类型、是否必填、是否有默认值
props:{
name: {
type:String,//传过来的类型
require:true//是否必填
},
sex: {
type:String,
// default:'男',//是否有默认值,这个和是否必填冲突，两者选一个
require:true//是否必填
},
age: {
type:Number,
default:33//是否有默认值,
}
},
methods:{
change(){
this.myAge++
}
}
}
</script>
- 要是props某个属性有default:33//是否有默认值, 父组件可以不填
<Student name="高高" sex="男"></Student>//没有age
