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

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信