vue2的$emit在vue3版本版本的使用方法

公司开始了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整的爽,节省好多代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农有梦想

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值