学习Vue2 脚手架部分，目前这个子组件给父组件传递信息这块有一个问题,求大家指教
App组件中有两个子组件 一个使用 自定义事件 还有一个使用这个 refs 找到这个这个组件 然后再通过$on自定义绑定事件
这个是App组件
<template>
<div>
<student ref="stu">student>
<school v-on:Atguigu="getSchoolMess">school>
div>
template>
```javascript
<script>
import Student from "./components/Student.vue";
import School from "./components/School.vue";
export default {
components: {
Student,
School,
},
methods: {
callback() {
console.log("我是这个Atguigu");
},
getSchoolMess(address) {
console.log(address);
},
},
mounted() {
this.$refs.stu.$on("Atguigu", () => {
console.log("我是这个Atguigu");
});
this.$refs.stu.$on("Atguigu", this.callback);
},
};
script>
**这个是school一个子组件**
```html
<template>
<div>
学校地址:{{ address }}
<br />
学校名称：:{{ name }}
div>
template>
```javascript
<script>
export default {
data() {
return {
address: "北京",
name: '尚硅谷',
};
},
mounted() {
this.$emit('Atguigu',this.address)
},
};
script>
**这个是一个student组件**
```html
<template>
<div>
学生姓名:{{ name }}
<br />
学生年龄:{{ age }}
div>
template>
<script>
export default {
data() {
return {
name: "zhangsan",
age: 18,
};
},
mounted() {
this.$emit('Atguigu')
},
};
直接在组件上 直接定义一个自定义事件 在这个子组件中 通过这个 this.$emit('自定义事件名')触发这个自定义事件
回调函数 在这个app组件中执行 this.$emit('自定义事件名' ）也可以传递参数 可以完成 这个子组件给父组件传递参数
另一种方法 通过 $this.refs.'定义的名称' 获取这个组件 然后通过
this.$refs.stu.$on("Atguigu", () => {
console.log("我是这个Atguigu");
});
给这个组件写一个 自定义事件名 this.$refs.stu.这个不就是 获取这个组件吗 然后在子组件里通过这个 this.$emit('自定义事件名' ）
触发这个自定义事件 不知道为什么这个回调函数 没有执行
难道说 这个 $on 这个不能用了 我之前看弹幕说 vue3这个$on 不能使用了
所以我想问 这个
this.$refs.stu.$on("Atguigu", () => {
console.log("我是这个Atguigu");
});
这个方法 的回调为什么没有执行
有可能是生命周期执行先后顺序问题，子组件的mounted会比父组件的mounted先执行，因此在子组件执行emit的时候，父组件还没有创建事件监听，因此监听不到，你可以试试在子组件mounted中使用异步setTimeout的方式触发emit试试。
setTimeout(()=>{
this.$emit('Atguigu')
},200)
谢谢谢谢，你的答案解决了我的问题