配置项props

1、功能：让组件接收外部传过来的数据

（1）传递数据：

<Demo name="xxx"/>

（2）接收数据：

方式一：

               //写法一：简单接收，如果想要接收到number类型的age需要在App中的age改为:age(这是v-bind:age的简写形式，会将18解析为一个js表达式，而不是一个字符串)
		props:['name','sex','age'],

方式二：

		//写法二：接收的同时限制数据类型
		props:{
		 	name:String,
		 	age:Number,
			sex:String
		}

方式三：

		//写法三：接受的同时对数据类型进行限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:17
			},
			sex:{
				type:String,
				require:true,
			}
		}

备注：props是只读的，Vue底层会监视你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请赋值props的内容到data中一份，然后去修改data中的数据。

案例

• App.vue

<template>
	<!-- 组件的结构 -->
	<div>
		<Student name="张三" :age="18" sex="男"></Student>
		<Student name="李四" :age="22" sex="女"></Student>
		<Student name="王五" :age="89" sex="男"></Student>
	</div>
</template>

<script>
	import Student from './components/Student'
	
	export default {
		name:'App',
		components:{
			Student
		},
	}
</script>

• Student.vue

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge}}</h2>
		<button @click="updateAge">点我修改学生年龄</button>
	</div>
</template>

<script>
	//组件交互相关的代码（数据、方法等等）
	export default {
		name:'Student',
		data(){
			return {
				msg:'我是一个尚硅谷的学生',
				//如果需要修改props可以在data中重新定义一个数据，对data中的新数据进行修改
				myAge:this.age,
			}
		},
		methods:{
			updateAge(){
				this.myAge++
			}
		},

		//接收到的props不能修改，只读

		//写法一：简单接收，如果想要接收到number类型的age需要在App中的age改为:age(这是v-bind:age的简写形式，会将18解析为一个js表达式，而不是一个字符串)
		// props:['name','sex','age'],

		//写法二：接收的同时限制数据类型
		// props:{
		// 	name:String,
		// 	age:Number,
		// 	sex:String
		// }

		//写法三：接受的同时对数据类型进行限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:17
			},
			sex:{
				type:String,
				require:true,
			}
		}
	}
</script>