配置项props

Student.vue文件

<template>
  <div class="student">
    <h2>学生姓名：{{msg.name}}</h2>
    <h2>学生年龄：{{age}}</h2>
    <h2>学生性别：{{gender}}</h2>
    <h2>学生学号：{{stuId}}</h2>
    <h2>要修改的myAge{{myAge+1}}</h2>
    <button @click="updateMyAge">点击修改myAge</button>
  </div>
</template>

<script>
export default {
  name: 'Student',
data() {
  return {
    msg: {
      name:'张三',
    },
    myAge: this.age
  }
},
methods: {
  updateMyAge() {
    this.myAge++;
  }
},
// 接收到的props是不允许更改的
props: ['age','gender','stuId'],
//接收的同时对类型进行限制
// props: {
//   age:Number,
//   gender:String,
//   stuId:String
// }

// props: {
//   age: {
//     type:Number,
//     required:true
//   },
//   stuId: {
//     type:String,
//     required:true
//   },
//   gender: {
//     type:String,
//     default: '男'
//   }
// }
}
</script>

<style>
.student {
  background-color: orange;
}
</style>

App.vue文件

<template>
  <div id="app">
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDom">点我输出上方DOM元素</button>
    <School></School>
    <Student :age="18" gender="女" stuId="B21044513"></Student>
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  components: {
    School,
    Student
  },
  data() {
    return {
      msg: '欢迎学习vuecli'
    }
  },
  methods: {
    showDom() {
      console.log(this.$refs.title);
    }
  },

}
</script>

<style>

</style>