©2020-2024 ioDraw All rights reserved
The company started vue3 restructure vue2 Project tasks , There was a problem that bothered me for a long time
That's the protagonist today $emit; Call parent component method ;
stay vue2 It's simple and direct
// Parent.vue response <template> <child @ParentClick="ParentClick"></child> </
template> <script> export default { methods: { ParentClick(){ console.log(
' The sub component clicks on the method of the father component ParentClick') }}} </script> // child.vue response <template> <div> Here are the subcomponents
</div> <button @click="$emit('ParentClick')"> Method 1 , Direct call </button> <button @click=
"clickparent"> Method 2 , Indirect call </button> </template> <script> export default { methods: {
clickparent() { // Call the custom of the parent component ParentClick event , The second parameter is to pass the value to the parent component this.$emit("ParentClick",
"vue2 Ha ha, the parent component has been called successfully "); }, }, }; </script>
But this method is vue3.2 It doesn't work ;
vue3 No, this Object
What should I do ?
How can this embarrass me, a clever little ghost ;
Don't force to look at the code , The point is vue3 Added defineEmits method
// Parent.vue Parent component <template> <child @ParentClick="ParentClick"></child> </
template> <script setup> import './child.vue'//vue3 It can be used by directly introducing sub components , You don't need to register const
ParentClick=()=>{ console.log(' The sub component clicks on the method of the father component ParentClick') } </script> //
child.vue Subcomponents <template> <div> Here are the subcomponents </div> <button @click="emit('ParentClick')">
Method 1 , Direct call </button> <button @click="clickparent"> Method 2 , Indirect call </button> </template> <
script setup> import { defineEmits} from 'vue'// Introduction method const emit = defineEmits([
'clickparent'])// Method to get parent component emit const clickparent=()=> {
// Call the custom of the parent component ParentClick event , The second parameter is to pass the value to the parent component emit("ParentClick", "vue3 Ha ha, the parent component has been called successfully "); },
</script>
OK La La La , I'm a lovely little head of the family ;vue3 of emit The method is so happy ;
Let's do it together
Finally, let's sigh VUE3.2 of setup The whole is cool , Save a lot of code
Technology