vue学习(33)props
2022-03-24 本文已影响0人
哆啦C梦的百宝箱
<template>
<div>
<h1>{{ msg }}</h1>
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg: "欢迎学习vue!",
};
},
//第一种写法
//props:['name','age','sex']
// 第二种写法
// props:{name:String,age:Number,sex:String}
//第三种写法
props:{
name:{
type:String,
require:true
},
age:{
type:Number,
default:18
},
sex:{
type:String,
require:true
}
}
};
</script>
<style></style>
知识点:
- 配置项props:
- 让组件接收外部传来的数据
(1)传递数据:<Demo name='xxx'/>
(2)接收数据
第一种方式:只接收
props:['name'];
第二种方式:限制类型
props:{name:String}
第三种方式:限制类型+指定默认值+必填限制(一般默认值和必填限制不会同时出现)
props:{
name:{
type:String,
default:'xxx',
require:true
}
} - 修改props的值会报错(浅层次的监视,比如你去修改对象中的某个值,它是检测不到的,整个对象的替换,它会检测到),如果确实需要改变值,可以在data中声明一个变量等于props传入的值。