props配置

  <template>
    <div>
      <!-- 付款方 -->
      <Student name="李四" sex="男" :age="18" /><hr>
      <Student name="老王" sex="男" v-bind:age="25" /> 
      <hr/>
      <!-- <Student />
      <hr/>
      <Student /> -->
    </div>

    配置项props
        功能: 让组件接收外部传过来的数据
        (1).传递数据
          <Demo name="xxx"/>
        (2).接收数据:
          第一种方式(只接收):
          props:['name']
          
          第二种方式(限制类型):
          props:{
            name:String
          }
          
          第三种方式(限制类型,限制必要性,指定默认值)
          props:{
            name:{
              type:String, // 类型
              required:true, // 必要性
              default:''   // 默认值
            }
          }
          备注: props是只读的, Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,
                若业务需求确实需要修改,那么请复制props的内容到data中一份,然后求修改data中的数据
  </template>
  
  <script>
  // 引入school组件
import Student from './components/Student.vue'
  export default {
    name: 'App',
    components: {
        Student
    },
    data() {
      return {
      }
    },
    methods :{
    },
  
  }
  </script>
  
  <style>
  
  </style>

  -------------------------------------------------------------------------------------

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

  </div>
</template>

<script>
export default {
    name:'MyStudent',
    // 收款方
    // 简单声明接收
    // props: ['name','age','sex'], 
    
    // 接收的同时对数据进行类型限制
    // props: {
    //   name: String,
    //   age:Number,
    //   sex:String
    // },

    // 接收的同时对数据进行类型限制+默认值的指定+必要性的限制
     props: {
      name: {
        type: String, //name的类型是字符串
        required:true //name是必要的
      },
      age: {
        type: Number,
        default:99  // 默认值
      },
      sex : {
        type:String,
        required:true
      },

    },
    data() {
        return {
            msg: '无所谓，没必要，不至于',
            // name:'张三',
            // sex:'男',
            myAge:this.age,
        }
    },
    methods:{
      updataAge () {
       this.myAge = 22
      }
    }


}
</script>

<style>

</style>