1.传统的方式子组件传递数据给父组件
子组件给父组件传递信息，首先父组件要给子组件一个函数，然后子组件在调用这个函数
通过父组件给子组件传递函数类型的props实现：子给父传递数据
例子：
我们定义一个函数：getSchoolName
App.vue:
<template> ... <LqjSchool:getSchoolName="getSchoolName"></LqjSchool><StudentLqj></StudentLqj></div></template>
<script>methods:{ getSchoolName(name){ console.log('App收到了学校名:',name) } } </script>
LqjSchool.vue:
<template><divclass="School"><button@click="sendSchoolName">把学校名给App</button></div></template>
<script>props:['getSchoolName'] methods:{ sendSchoolName(){ this.getSchoolName(this.name) } } </script>
2.自定义事件
v-on:atlqj="demo"解释：v-on或@在哪个组件上就是给那个组件绑定事件，
例如：<StudentLqj v-on:atlqj="demo"></StudentLqj>
解释：由于v-on在StudentLqj组件上，所以可以说v-on在组件StudentLqj的vc身上绑定了个事件，时间名字叫：atlqj，如果有人以后
触发了这个事件，那么demo函数就会被调用。
第一种写法：使用@或v-on
举例：
App.vue:
<template> 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 <StudentLqjv-on:atlqj="getStudentName"></StudentLqj> //或者 //<StudentLqj@atlqj="getStudentName"></StudentLqj> //如果像点击之点击一次后不让用户再次点击： //<StudentLqj@atlqj.once="getStudentName"></StudentLqj></template>
<script>methods:{ getStudentName(name){ console.log('App收到了学生名:',name) } } </script>
给哪个组件绑定的找哪个组件触发：
StudentLqj.vue:
<template><button@click="sendStudentName">把学生名给App</button></template>
<script>methods:{ sendStudentName(){ //触发Student组件实例身上的atlqj事件this.$emit('atlqj',this.name) } } </script>
第二种写法：使用ref（更灵活）
App.vue:
<template><StudentLqjref="student"></StudentLqj></template>
<script>mounted(){ setTimeout(()=>{ //this.$refs.student.$on('atlqj',this.getStudentName)//解释：$on:可以一直点击this.$refs.student.$once('atlqj',this.getStudentName) //解释：$once:只能点击一次，再点击就不生效了 },3000) //等三秒之后点击才可以起效 } </script>
StudentLqj.vue:
<template><divclass="Student"><button@click="sendStudentName">把学生名给App</button></div></template>
<script>methods:{ sendStudentName(){ //触发Student组件实例身上的atlqj事件this.$emit('atlqj',this.name) } } </script>
