传递数据(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>

  

posted on 2023-02-16 21:05  爱前端的小魏  阅读(62)  评论(0编辑  收藏  举报

导航