526互联

vue3.0之emit的使用

发布时间 2023-06-26 18:59:29作者: 树苗叶子

主要用于跨组件传输数据，emit可以调用父组件中的自定义函数。

使用方法

let emit = defineEmits(['父组件自定义函数1', '父组件自定义函数2', '...'])

// 调用父组件自定义函数的执行
emit('父组件自定义函数')

主要逻辑

  1. 在父组件中定义一个自定义函数
<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>