Vue cli props

一、作用

接收数据(父组件传输)

二、语法

1、传递数据

<Demo name="jojo" sex="male" :age="30"/>

注意：传递Number数据类型，需要数据绑定(数据绑定计算引号中的值)

2、接收数据

a、简单接收数据

props:['name', 'sex', 'age']

b、限制数据类型

props:{
    name:String,
    sex:String,
    age:Number
},

c、限制数据类型、是否必填、默认值

props:{
    name:{
        type: String,
        required: true,
    },
    age:{
        type: Number,
        default: 99,
    },
    sex:{
        type: String,
        required: true 
    }
},

三、重点

通过props接收的数据不能改(无get set)，要想改需要借助data

data() {
    return {
        msg:'学生信息',
        stdentAge: this.age,
    }
},

注意：别忘记改模板

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{stdentAge}}</h2>
    <button @click="addAge">点击</button>
  </div>
</template>