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

本文主要是介绍黑豹程序员-封装组件-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>

这篇关于黑豹程序员-封装组件-Vue3 setup方式子组件传值给父组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---