简介：用于父子组件通信时，子组件向父组件传递数据，不需要被导入即可使用，会在编译
<script setup>语法块时一同编译。注意的是 defineEmits 只能在<script setup>的顶层使用
使用
1、定义子组件文章来源：https://www.toymoban.com/news/detail-696577.html
// 子组件 child.vue
<template>
<button @click="handelClick">传递给父级</button>
<button @click="add">加</button>
<button @click="decrease">减</button>
</template>
<script setup lang="ts">
const emits = defineEmits(['clickFn', 'add', 'decrease'])// 定义一个或多个自定义事件
const handelClick = () => {
emits('clickFn', { name: '张三', age: 18,id: 1 }) // 第一个参数为自定义事件名 第二个参数为要传递的数据
}
const add = () => {
emits('add', 10) // 第一个参数为自定义事件名 第二个参数为要传递的数据
}
const decrease = () => {
emits('decrease', 3) // 第一个参数为自定义事件名 第二个参数为要传递的数据
}
</script>
2、定义父组件文章来源地址https://www.toymoban.com/news/detail-696577.html
// 父组件 parent.vue
<template>
<child @clickFn="updateInfo" />
<button @click="handelClick">传递给父级</button>
<button @click="handelAdd">加</button>
<button @click="handelDecrease">减</button>
</template>
<script setup lang="ts">
import child from './child.vue'
import { ref } from 'vue'
const num = ref(10)
const updateInfo = (userInfo) => {
console.log(userInfo) // { name: '张三', age: 18,id: 1 }
}
const handelAdd = (n) => {
num.value += n
}
const handelDecrease = (n) => {
num.value -= n
}
</script>
到了这里，关于vue3 defineEmits的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
