【前端】prop传值的用法

prop配置项的作用是让组件接收外部传过来的值。
组件标签上传值给vue组件对象

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{      
    }
  },
  props:['name','age']      #简单接收
}
</script>

方式2:利用对象方式设置数据类型进行类型限制

props:{
 name:String,
 age:Number
}

数据类型包含了以下几种：

方式3：比较完整的带有prop验证方式的写法

props:{
    name:String,
    age:{
      type:Number,
      default:99  //设置默认值，如果他的默认值是数组或者对象必须从一个工厂函数获取
    },
    sex:{
      type:String,
      required:true  //必须填写
    },
    //自定义验证函数
    score:{
      type:Number,
      validator(value){
        return value>=0 && value<=100   //验证函数返回值为true则验证通过
      }
    }
}

props是只读的，如果需要修改可以复制props中的内容到data中一份，然后去修改data中的数据。因为vue底层会检测对props的修改，如果进行了修改，就会发出警告。

<template>
  <div class="hello">
    <h1>学生信息</h1>
    <h2>学生名称：{{name}}</h2>
    <h2>学生年龄：{{myAge+1}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <button @click="myAge++">年龄+1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{     
      myAge:this.age
    }
  },
  // props:{
  //   name:String,
  //   age:Number
  // }
  props:{
    name:String,
    age:{
      type:Number,
      default:99  //设置默认值，如果他的默认值是数组或者对象必须从一个工厂函数获取
    },
    sex:{
      type:String,
      required:true  //必须填写
    },
    //自定义验证函数
    score:{
      type:Number,
      validator(value){
        return value>=0 && value<=100   //验证函数返回值为true则验证通过
      }
    }
  }
}
</script>