vue 子组件给父组件传值 defineEmits

总结：

步骤 1、首页在子组件定义组件需要发射的组件事件，数组方式，如：
const emits = defineEmits(["emit_a", "emit_b"])
步骤 2、然后通过返回的变量 emits来执行发射服务，如下：
emits("emit_a", {name:"liziyu",age:20})
步骤 3、在父组件内的子组件标签通过@与事件名emit_a作为接收点，如：
<Footer @emit_a="getEmitsObj" />
其中 getEmitsObj为任意自定义的函数名。
步骤 4、在父组件内，定义getEmitsObj函数，来接收子组件的值。如：
const getEmitsObj = (data) => {console.log(data);}
其中data就是接收到的值，此时可以将它赋值给组件变量，就可以正常使用了。

App.vue

<script setup>
  import { reactive,ref } from 'vue'

  //导入子组件
  import Header from "./components/header.vue"

  //响应式数据
  const web = reactive({
    name: "邓瑞编程",
    url: 'dengruicode.com'
  })

  const user = ref(0)

  //子传父
  const emitsWeb = (data) => {
    console.log("emitsWeb:",data)
    web.url = data.url
  }

  const emitsUser = (data) => {
    console.log("emitsUser:",data)
    user.value += data
  }
</script>

<template>
  <!-- 子传父 -->
  <Header @web="emitsWeb" @user="emitsUser" />

  {{ web.url }} - {{ user }}
</template>

<style scoped></style>


header.vue

<script setup>
    //子组件

    /*
        defineEmits是Vue3的编译时宏函数,
        用于子组件向父组件发送自定义事件
    */
    //子传父
    //定义一个名为 emits 的对象, 用于存储自定义事件
    const emits = defineEmits(["web","user"])
    //发送名为 web 和 user 的自定义事件
    emits("web", {name:"邓瑞",url:"www.dengruicode.com"})
    
    //添加用户
    const userAdd = () => {
        //发送名为 user 的自定义事件
        emits("user", 10)
    }
</script>

<template>
    <h3>Header</h3>

    <button @click="userAdd">添加用户</button>
</template>

<style scoped>

</style>

转自：邓瑞编程