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傳參的細節注意點