关于 子组件给父组件通过这种自定义事件传递数据

Question

学习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");
    });

这个方法 的回调为什么没有执行

Answer 1

有可能是生命周期执行先后顺序问题，子组件的mounted会比父组件的mounted先执行，因此在子组件执行emit的时候，父组件还没有创建事件监听，因此监听不到，你可以试试在子组件mounted中使用异步setTimeout的方式触发emit试试。

setTimeout(()=>{
    this.$emit('Atguigu')
},200)