Vue中的props属性

1. 作用：让组件接收外部传过来的数据

2. 配置props：

   2.1 配置props

//1. 简单的写法 没有类型限制
props: ['name', 'sex', 'age']


//2. 这种写法可以限制输入类型 如果类型不匹配 会在调试控制台输出错误信息
props : {
    name: String,
    sex: String,
    age: Number
}

// 完整的配置  可以限制是否是必须的  默认值
props: {
    name: {
        type: String,
        required: true //强制要求传入，是必要的
    },
    sex: {
        type: String,
        required: true
    },
    age: {
        type: Number,
        default: 22 //默认值 一般用于非必须的属性传入
    },
}

2.2 使用有props的组件

 <student name='张三' age='18' sex='男'/>


 <!-- 使用v-bind会将属性后的值转化为表达式，对age使用 :age可以传入数值 -->
 <student name='张三' :age='18' sex='男'/>


 <!-- 使用默认age值 -->
 <student name='张三' sex='男'/>

3. props是只读的，Vue底层会监测你对props的修改。如果进行了修改，就会发出警告，如果业务确实需要修改，需要复制props中的内容到data中一份，然后去修改data中的数据

// 用sName复制一份name，通过修改sName达到修改name的目的
data() {
 return {
     sName: this.name
 }
}