公司开始了vue3重构vue2项目的任务，中间遇到过一个问题困扰了我很久

那就是今天的主角$emit；调用父组件方法；
在vue2中很简单直接

// Parent.vue 响应
<template>
   <child @ParentClick="ParentClick"></child>
</template>
<script>
   export default {
   methods: {
   ParentClick(){
   console.log('子组件点击了爸爸组件的方法ParentClick')
   }}}
</script>

// child.vue 响应
<template>
  <div>这里是子组件</div>
  <button @click="$emit('ParentClick')">方法一、直接调用</button>
  <button @click="clickparent">方法二、间接调用</button>
</template>
 
<script>
export default {
  methods: {
    clickparent() {
      //调用父组件自定义的ParentClick事件，第二个参数是传值给父组件
      this.$emit("ParentClick", "vue2哈哈成功调用父组件了");
    },
  },
};
</script>
复制

但是这个方法在vue3.2就不管用了啊；
vue3没有this对象啊
怎么办啊？
这个怎么能难倒我这个小机灵鬼呢；
不逼逼看代码,重点是vue3新增了defineEmits方法

// Parent.vue 父组件
<template>
   <child @ParentClick="ParentClick"></child>
</template>
<script setup>
import './child.vue'//vue3直接引入子组件即可使用，不需要注册了
 const  ParentClick=()=>{
   console.log('子组件点击了爸爸组件的方法ParentClick')
   }
</script>

// child.vue 子组件
<template>
  <div>这里是子组件</div>
  <button @click="emit('ParentClick')">方法一、直接调用</button>
  <button @click="clickparent">方法二、间接调用</button>
</template>
 
<script setup>
import { defineEmits} from 'vue'//引入方法
const emit = defineEmits(['clickparent'])//获取父组件的方法emit
const clickparent=()=> {
      //调用父组件自定义的ParentClick事件，第二个参数是传值给父组件
      emit("ParentClick", "vue3哈哈成功调用父组件了");
    },
</script>
复制

OK啦啦啦，我是可爱的小当家；vue3的emit方法就这么愉快的搞定了；
小伙伴们一起搞起来吧

最后感叹一下用VUE3.2的setup整的爽，节省好多代码