<template>

	<div>

		<h3>{{msg}}</h3>

		<h3>姓名:{{name}}</h3>

		<h3>年龄:{{myage}}</h3>

		<h3>性别:{{sex}}</h3>

		<button @click="add">点击我，年龄++</button>

	</div>

</template>

<!--

	配置项：props

	1.传递数据：<Student name='wei' :age="18" sex='男'></Student>  <!-- :age  : 数据绑定，对字符串里面内容进行操作 -->

	2.接收数据，三种方式：

	 i：(简单接收)

	 props:['name'],

	 i：（限制类型）

	 props:{name:String}

	 i：（类型限制+默认值限制，必要性限制）

	 props:{

		 name:{

			 type:String,//类型限制

			 required:true,//必要性限制

			 default:99,//默认值限制

		 }

	 }

备注：props是只读的，不能修改（传进来）数据，如果想要修改，那么需要复制一份要修改的数据放入data中，操作data中数据进行修改

 -->

<script>

	export default {

		name:'Student',

		data(){

			return {

				msg:'我的项目',

				myage:this.age//不能直接对数据，进行修改，所以需要再整出来个变量

			}

		},

		methods:{

			add(){

				this.myage++//这边直接对变量++

			}

		},

		//简单接收

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

		//接收时，判断类型是否准确，不准确，控制台给出提示

		// props:{

		// 	name:String,

		// 	age:Number,

		// 	sex:String

		// },

		//接收时，对数据进行：类型限制+默认值限制，必要性限制

		// props:{

		// 	name:{

		// 		type:String,

		// 		required:true,//必要性限制

		// 	},

		// 	age:{

		// 		type:Number,

		// 		default:99,//默认值限制

		// 	},

		// 	sex:{

		// 		type:String,

		// 		required:false,//必要性限制

		// 	}

		// },

	}

</script>

<style>

</style>

<template>

	<div>

		<Student name='wei' :age="18" sex='男'></Student>  <!-- :age  : 数据绑定，对字符串里面内容进行操作 -->

	</div>

</template>

<!--

 -->

<script>

	import Student from './components/Student'

	export default{

		name:'App',

		components:{Student}

	}

</script>

<style>

</style>