1.传统的方式子组件传递数据给父组件
子组件给父组件传递信息，首先父组件要给子组件一个函数，然后子组件在调用这个函数 通过父组件给子组件传递函数类型的props实现：子给父传递数据
例子： 我们定义一个函数：getSchoolName
App.vue:
代码语言：javascript复制<template>
...
<LqjSchool :getSchoolName="getSchoolName"></LqjSchool>
<StudentLqj></StudentLqj>
</div>
</template><script>
...
methods:{
getSchoolName(name){
console.log('App收到了学校名:',name)
}
}
...
</script>LqjSchool.vue:
代码语言：javascript复制<template>
<div class="School">
<button @click="sendSchoolName">把学校名给App</button>
</div>
</template><script>
...
props:['getSchoolName']
methods:{
sendSchoolName(){
this.getSchoolName(this.name)
}
}
...
</script>- -解释：由于v-on在StudentLqj组件上，所以可以说v-on在组件StudentLqj的vc身上绑定了个事件，时间名字叫：atlqj，如果有人以后 - -触发了这个事件，那么demo函数就会被调用。">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:
代码语言：javascript复制<template>
通过父组件给子组件绑定一个自定义事件实现：子给父传递数据
<StudentLqj v-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:
代码语言：javascript复制<template>
<button @click="sendStudentName">把学生名给App</button>
</template><script>
...
methods:{
sendStudentName(){
//触发Student组件实例身上的atlqj事件
this.$emit('atlqj',this.name)
}
}
...
</script>第二种写法：使用ref（更灵活）
App.vue:
代码语言：javascript复制<template>
<StudentLqj ref="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:
代码语言：javascript复制<template>
<div class="Student">
<button @click="sendStudentName">把学生名给App</button>
</div>
</template><script>
...
methods:{
sendStudentName(){
//触发Student组件实例身上的atlqj事件
this.$emit('atlqj',this.name)
}
}
...
</script>
