Detailed explanation of custom events of Vue components

<template>
  <div >
    <h2>{{msg}}</h2>
    <!-- Implemented by passing function-type data props from parent component to child component: child passes data to parent -->
<School :getName="getName"/>
<Student :getStudentname="getStudentname"/>
<!-- Bind a custom event to the child component through the parent component: realize the child to parent data transfer-->
<Age v-on:elderSex="demo"/>
<!-- Bind a custom event to the child component through the parent component: the child passes data to the parent (the second way of writing: using ref) -->
   <!-- <Student ref="student"/> -->
  </div>
</template>
<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
import Age from './components/Age.vue'
export default {
name:'App',
components:{School,Student,Age},
data(){
  return {
    msg:'Hello, world! '
  }
},
methods:{ 
  getName(name){
    console.log('App received the name',name);
  },
  getStudentname(name1){
    console.log('Received the student's name',name1);
  },
  demo(sex1){
    console.log('demo is called',sex1);
  }
},
// mounted() {
  //Bind custom events // this.$refs.student.$on('elderSex',this.schoolAge)
//Bind custom event (one-time)
// this.$refs.student.$once('elderSex',this.schoolAge)
// },
}
</script>
<style scoped>
</style>

<template>
  <div class="demo">
    <h2>Student name: {{name}}</h2>
    <h2>Student age: {{age}}</h2>
    <button @click="sendStudentname">Send the student's name to the APP</button>
  </div>
</template>
<script>
  export default {
    name: 'Student',
    props: ['getStudentname'],
    data() {
      return {
        name: 'Zhang San',
        age: 19
      }
    },
    methods: {
      sendStudentname() {
        this.getStudentname(this.name)
      }
    }
  }
</script>
<style>
  .demo {
    background-color: skyblue;
  }
</style>