主要用于跨组件传输数据,emit可以调用父组件中的自定义函数。
使用方法
let emit = defineEmits(['父组件自定义函数1', '父组件自定义函数2', '...'])
// 调用父组件自定义函数的执行
emit('父组件自定义函数')
主要逻辑
- 在父组件中定义一个自定义函数
<template>
<Login v-if="is_login" @close="close_login"/>
</template>
<script>
const close_login = () => {
console.log('我是父组件自定义函数的close')
}
</script>
比如自定义函数为 close,它会执行close_login函数
2. 在子组件中调用
<template>
<button @click="my_click">点我执行父组件</button>
</template>
<script>
let emit = defineEmits(['close'])
// 这样就会调用父组件中的close自定义函数,自定义函数又指向了close_login这个父组件中定义的函数,所以最终会执行close_login函数
const my_click = () => {
emit('close')
}
</script>
标签:函数,自定义,vue3.0,使用,组件,close,login,emit
From: https://www.cnblogs.com/smyz/p/17506506.html