公司开始了vue3重构vue2项目的任务,中间遇到过一个问题困扰了我很久
那就是今天的主角$emit;调用父组件方法; 在vue2中很简单直接
<template>
<child @ParentClick="ParentClick"></child>
</template>
<script>
export default {
methods: {
ParentClick(){
console.log('子组件点击了爸爸组件的方法ParentClick')
}}}
</script>
<template>
<div>这里是子组件</div>
<button @click="$emit('ParentClick')">方法一、直接调用</button>
<button @click="clickparent">方法二、间接调用</button>
</template>
<script>
export default {
methods: {
clickparent() {
this.$emit("ParentClick", "vue2哈哈成功调用父组件了");
},
},
};
</script>
但是这个方法在vue3.2就不管用了啊; vue3没有this对象啊 怎么办啊? 这个怎么能难倒我这个小机灵鬼呢; 不逼逼看代码,重点是vue3新增了defineEmits方法
<template>
<child @ParentClick="ParentClick"></child>
</template>
<script setup>
import './child.vue'
const ParentClick=()=>{
console.log('子组件点击了爸爸组件的方法ParentClick')
}
</script>
<template>
<div>这里是子组件</div>
<button @click="emit('ParentClick')">方法一、直接调用</button>
<button @click="clickparent">方法二、间接调用</button>
</template>
<script setup>
import { defineEmits} from 'vue'
const emit = defineEmits(['clickparent'])
const clickparent=()=> {
emit("ParentClick", "vue3哈哈成功调用父组件了");
},
</script>
OK啦啦啦,我是可爱的小当家;vue3的emit方法就这么愉快的搞定了; 小伙伴们一起搞起来吧
最后感叹一下用VUE3.2的setup整的爽,节省好多代码
|