- 站点信息
- 问题反馈
- 邮箱：[email protected]
- 吐槽一下
关注微信
©2020-2025 ioDraw All rights reserved,
Privacy Policy
公司开始了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整的爽，节省好多代码