vue中的父子组件传参 Propos解析

一、自定义一个学生组件：Student

<template>
 <div>
   <h1>{{msg}}</h1>
   <h2>学生姓名：{{name}}</h2>
   <h2>学生性别：{{sex}}</h2>
   <h2>学生年龄：{{myAge+1}}</h2>
   <button @click="updateAge">尝试修改收到的年龄</button>
 </div>
</template>

<script>
 export default {
  name:'Student',
  data() {
    return {
     msg:'我是一个学生',
     myAge:this.age
         }
      },
  methods: {
    updateAge(){
    his.myAge++
	 }
     },
  //简单声明接收
  props:['name','age','sex'] 
	}
</script>

二、父组件调用并传参

<template>
 <div>
   <Student name="李四" sex="女" :age="18"/>
 </div>
</template>

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

Props传参的三种方式

1、简单声明接收

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

2、接收的同时对数据进行类型限制

 props:{
	 name:String,
	 age:Number,
	 sex:String
	}

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

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

required一般不与default一起用

Props传参的细节注意点

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

2、props默认传参都是字符串类型，如果你需要Number类型，可以在传参时使用v-bind进行动态绑定，比如 :age="18"，这样写传的就是number类型，如果age="18",就是字符串18（v-bind绑定的是“”中js表达式的结果）

3、props中的参数名称与data中的数据名称不要重复，props中的优先级比较高，代码会执行props中的，但是控制台会报错。这样写拿不到data中的数据