组件自定义事件(子传父组件)-$emit

案例：将子组件Student中的name传给父App组件

Student组件

<template>
    <div class="student">
        <h3>学生姓名：{{name}}</h3>
        <h3>学校性别：{{sex}}</h3>
        <button @click="sendStuName">点我把学生名给App</button>
    </div>
</template>
<script>

export default {
    data(){
        return{
            name: '张三',
            sex: '男'
        }
    },
    methods: {
        sendStuName(){
            //触发Student组件实例身上的getStuName事件
            this.$emit('getStuName',this.name)
        }
    },    
}
</script>
<style scoped>
    .student{
        background-color: pink;
    }
</style>

App组件

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <school></school>
    <Student @getStuName="getStuName"></Student>
  </div>
</template>

<script>
import School from './components/School'
import Student from './components/Student'

export default {
  name: 'App',
  components: {
    School,Student
  },
  data(){
    return{
      msg: '你好啊'
    }
  },
  methods: {
    getStuName(name){
      console.log('app收到了学生姓名：',name);
    }
  },
}
</script>

<style>
</style>