44.vue标签传参

Student.vue

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

<script>
//对外暴露组件
export default {
  name: "MyStudent", //组件名
  data() {
    //组件数据
    return {
      msg: "我是一个广职院的学生",
      //将接收到的数据传到data里，只有data里的数据可以修改
      myAge: this.age,
      myName: this.name,
      mySex: this.sex,
    };
  },
  methods: {
    updateAge() {
      //修改接收到的属性值，不推荐用
      this.age = 22;
    },
  },
  //组件接收参数

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

  //接收的同时对数据进行类型限制
  // props: {
  //   name: String,
  //   age: Number,
  //   sex: String,
  // },
  //完整接收写法
  props: {
    name: {
      type: String, //name的类型是字符串
      required: true, //必须要传
    },
    age: {
      type: Number,
      default: 99, //默认值
    },
    sex: {
      type: String,
      required: true,
    },
  },
};
</script>

<style>
</style>

App.vue

<template>
  <div>
    <!-- 使用student组件 -->
    <!-- 这里传入三个值到Student组件里 -->
    <!-- :age会在传过去的组件里按照表达式运算 -->
    <student name="张三" sex="李四" :age="18" />
  </div>
</template>

<script>
import Student from "./components/Student.vue";
//创建App组件
export default {
  name: "App", //组件名称
  components: {
    //组件的子组件
    Student,
  },
};
</script>

<style>
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app');