配置项props

<template>
  <div>
    <Student name="李四" sex="女" :age="19" />
    <!-- age前面加冒号，表示age是动态单向绑定 -->
  </div>
</template>

<script>
import Student from "./components/Student.vue";

export default {
  name: "App",
  components: { Student },
};
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ age + 1 }}</h2>
    <button @click="addAge">点我年龄加一</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "我是一个前端学生",
      myAge: this.age,
    };
  },
  methods: {
    addAge() {
      this.age++;
    },
  },

  //props: ["name", "sex", "age"],//简单接收

  //接收的同时指定数据类型
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String
  // }

  //高级声明
  props: {
    name: {
      type: String, //限定类型为字符串类型
      required: true, //name必须要传
    },
    age: {
      type: Number,
      default: 99, //默认值
    },
    sex: {
      type: String,
      required: true,
    },
  },
};
</script>