传递数据(props)

student.vue

<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>

　　App.vue

<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>