Vue3子组件向父组件传值（defineEmits()）

2.父子组件传值（子传父 宏函数defineEmits()）

父 App.vue

<template><div><Header @getWeb="emitsGetWeb" @userAdd="emitsUserAdd"></Header>{{web.name}}{{web.url}}</div>
</template><script setup>
import { reactive, ref } from 'vue'
import Header from './components/header.vue';
const web = reactive({name: 'lf',url:"www.baidu.com"})
const user = ref(0)
// 子组件传递的数据
const emitsGetWeb = (data) => {console.log(data)web.name = data.nameweb.url = data.url
}
const emitsUserAdd = (data) => {console.log(data)web.name = data
}</script><style lang="scss" scoped></style>

子header.vue

<template><div><button @click="add">添加</button></div>
</template><script setup>// 数组的元素会触发自定义事件的名称
// 如果想将子组件定义的自定义函数传递给父组件，需要将defineEmits赋值给一个常量
const emits = defineEmits(['getWeb','userAdd'])
emits('getWeb', { //通过子组件向父组件发送了一个自定义事件getWebname: 'lflflflf',url: 'www.baidu.com'
})
const add = () => {emits('userAdd', 10)
}</script><style lang="scss" scoped></style>