<template>
  <div class="demo">
    <h1>{{ msg}}</h1>
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
    <h2>学生的年龄:{{myage+1}}</h2>
    <button @click="changeage">点我修改数据</button>
  </div>
</template>

<script>
  export default {
    name: 'student',
    data() {
      return {
        msg: '王者爱好者',
        myage:this.age
      }
    },
    methods: {
      changeage(){
       this.myage=24
      }
    },
    //简单接收
   // props:['name','age','sex']


    //接收的同时对数据进行类型的限制
    //  props:{
    //    name:string,
    //    age:number,
    //    sex:string,
    //  }

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

  }
</script>


<template>
  <div>
    <student name="张三" sex="男" :myage="20"/>
  </div>
</template>

<script>
  //引入student组件
  import student  from './components/student.vue'
  export default {
    name: 'app',
    components: {
     student
    }
  }

</script>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注www.887551.com的更多内容!