Vue3 子组件像父组件传递数据 自定义事件 defineEmits

介绍

很多情况下子组件都需要像父组件去传递一些数据，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)
}

成功拿到数据