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