介绍

很多情况下子组件都需要像父组件去传递一些数据，Vue3和Vue2传递值的写法不太一样。

例子

很常见的一个案例，弹出一个商品对话框，用户选择商品后把商品信息返回给父组件，使用自定义事件去做。

子组件

选择商品对话框

<template><a-modal :open="open"title="选择商品"@cancel="close":footer="false"><p>{{goods.name}}</p><p>{{goods.pie}}</p><p>{{goods.number}}</p><a-button type="primary" @click="retGoods">选择商品</a-button></a-modal>
</template>
<script setup>
import {reactive, ref ,defineEmits,defineProps } from "vue";defineProps({open: {type: Boolean,},
})const goods=reactive(({name:'鱼子酱',pie:9.9,number:100
}))const emit=defineEmits(["select"])
//关键代码 select为触发父组件的事件function retGoods(){
//goods为商品信息传递给父组件emit("select",goods)
}
</script>

点击选择商品后将商品信息返回给父组件

父组件

点击选择商品后会触发@select事件

  <SelectDialog v-model:open="open" @select="selectGoods"></SelectDialog>

function  selectGoods(item) {console.log(item)
}

成功拿到数据