vue3 <script setup> 子组件传递数据给父组件

业务场景

vue3 <script setup> 子组件讲数据传递给父组件，[defineEmits]应用。业务场景子组件表单提交数据传递给父组件，父组件接受后发送接口请求。

父组件

// 父组件
<template>
    <div>　
        <childForm ref="childRef" @onSubmitParent="onFinish"/>
    </div>
</template>

<script setup>
import { ref } from "vue";
import childForm from "./childForm.vue";
const onFinish = (data) => {
   console.log(data);
   // axios data
}
</script>
复制代码

子组件

<template>
   <el-form ref="formDataRef" :model="formData" label-position="top">
       <div>我是子组件form表单</div>
   </el-form>
   <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onSubmit(formDataRef)"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, defineEmits } from "vue";
const formDataRef = ref();
const formData = reactive({
   phone: "",
});
const emit = defineEmits(["onSubmitParent"]);
const onSubmit = (formEl) => {
  formEl.validate((valid) => {
    if (valid) {
      emit("onSubmitParent", formData);
    }
  });
};
</script>

官方文档defineEmits参考