黑豹程序员-封装组件-Vue3 setup方式子组件传值给父组件

需求

封装组件

需要使用到Vue3中如何定义父子组件，由子组件给父组件传值

核心代码

如何使用emits

组件

<template><button @click="sendData">点击按钮</button>
</template><script setup>
import {ref, defineEmits} from 'vue'
const emits = defineEmits(['childEvent'])//传递给父组件的数据
const data = ref('hello')const sendData = () => {emits('childEvent', data.value )       //触发emits事件
}
</script>

调用

<!-- 父组件 ParentComponent.vue -->
<template><div><!-- 注册子组件的自定义事件，并指定事件处理函数 handleChildEvent --><ChildComponent @childEvent="handleChildEvent"></ChildComponent></div>
</template><script setup>import {ref } from 'vue'import ChildComponent from './c.vue'const receivedData = ref()//data 为子组件调用后返回的数据const handleChildEvent = (data)=>{receivedData.value = data;console.log(data)}</script>