Vue学习：配置项props的配置，让组件接收外部传递的数据

组件之间可以独立

实现复用：另外的一个人 其他一样 名字、年龄不同

在传入时候 进行参数配置

<template>
    <div>   
        <Student name="小王" sex="男" age="16"/>   
        <Student name="小李" sex="女" age="14"/>     
    </div>
</template>

在子组件中对传入的参数确定使用使用props简单接收

<script>
    export default {
        name: 'Student',
        data() {
            return {
                msg:'学生信息'
            };
        },
        props:['age','name','sex'],//需要外部传入的参数 需要确认使用，顺序无所谓 简单接收
      
    };
</script>

实现年龄+1：使用绑定传入的参数的就变成了表达式

<template>
    <div>   
        <!-- : 传递的就变成了表达式-->
        <Student name="小王" sex="男" :age="16"/>   
        <Student name="小李" sex="女" age="14"/>     
    </div>
</template>

<template>
    <div class="student">
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <!-- 实现年龄+1 -->
        <h2>学生年龄：{{age+1}}</h2>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {
                msg:'学生信息'
            };
        },
        props:['age','name','sex'],//需要外部传入的参数 需要确认使用，顺序无所谓 简单接收

对传入的参数做限制类型 使用props 接收同时做限制

        props:{//对类型做限制
            name:String,
            age:Number,
            sex:String
        }
    };

Invalid prop: type check failed for prop "age". Expected Number with value 14, got String with value "14"

props配置限制 prop是属性 单个标识一个

//接收的同时对数据类型进行限制+默认值的指定+必要性的限制

       props:{
        name:{
            type:String,//name的类型
            required:true//name是必要的
        },
        age:{
            type:Number,//name的类型
            default:99//默认值 不是必要的
        },
        sex:{
            type:String,//sex的类型
            required:true//sex是必要的
        }
       }

<template>
    <div>   
        <!-- : 传递的就变成了表达式-->
        <Student name="小王" sex="男" :age="16"/>   
        <Student name="小李" sex="女" />     
    </div>
</template>

更改传入的参数，修改传入的数据

<template>
    <div class="student">
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <!-- 实现年龄+1 -->
        <h2>学生年龄：{{myage}}</h2>
        <button @click="updateAge">修改接收到的年龄</button>
    </div>
</template>

<template>
    <div class="student">
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <!-- 实现年龄+1 -->
        <h2>学生年龄：{{myage}}</h2>
        <button @click="updateAge">修改接收到的年龄</button>
    </div>
</template>

原因在于props传入的参数更高级别

            export default {
        name: 'Student',
        data() {
            return {
                msg:'学生信息',
               myage:this.age,//值传入的
            };
        },

       //接收的同时对数据类型进行限制+默认值的指定+必要性的限制
       props:{
        name:{
            type:String,//name的类型
            required:true//name是必要的
        },
        age:{
            type:Number,//name的类型
            default:99//默认值 不是必要的
        },
        sex:{
            type:String,//sex的类型
            required:true//sex是必要的
        }
       },
       methods: {
        updateAge(){
            this.myage++
        }
       },
    };

配置项props

功能：让组件接收外部传递的数据

1、传递数据 <组件名 参数名称="xxx">

2、接收数据

a、只接收

props:["参数名称"]

b、限制类型

props:{

参数名称:String

}

c、限制类型、限制必要性、指定默认值

props:{

参数名称:{

type:String,//类型

required:true//参数是必要的

default:99//默认值

}

}

props是只读的，Vue底层会监测你对props的修改，如果你进行了修改，就会发出警告，

如果需求对props进行修改，可以复制props内容到date中一份，然后对data中的数据进行修改