vue3 子组件向父组件传参

weixin_456164832026-04-08 23:26

Vue3 子组件向父组件传参的核心方案是：子组件用 defineEmits 触发自定义事件，父组件用 v-on 监听事件并接收数据。即：defineEmits定义事件 → emit抛数据 → 父组件@事件名接收数据。

步骤：

1.子组件：通过 defineEmits 创建发射方法 → 调用方法携带参数抛给父组件；

const emit = defineEmits( $'事件名'$ ) → emit(事件名, 数据)

2.父组件：在子组件标签上 @自定义事件名监听 → 拿到子组件传递的数据；

示例：

1.子组件child.vue

typescript 复制代码

<template>
  <div>
    <h3>子组件</h3>
    <button @click="sendToParent">点击向父组件传值</button>
  </div>
</template>

<script setup>
// 1. 定义要发射的事件名称（自定义，随便起名）
const emit = defineEmits(['send-data'])

// 2. 点击触发事件
const sendToParent = () => {
  // 要传递给父组件的数据
  const childData = {
    name: '子组件消息',
    content: '我是子组件，向父组件报到！',
    id: 10086
  }

  // 3. 核心：发射事件 + 传参
  // 参数1：事件名（必须和 defineEmits 里一致）
  // 参数2：要传递的数据
  emit('send-data', childData)
}
</script>

2.父组件parent.vue

typescript 复制代码

<template>
  <div>
    <h2>父组件</h2>
    <!-- 核心：监听子组件发射的自定义事件send-data,事件名必须和子组件中defineEmits里的一致 -->
    <Child @send-data="getChildData" />
    
    <!-- 展示子组件传过来的数据 -->
    <div v-if="msg">子组件传来的数据：{{ msg }}</div>
  </div>
</template>

<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

// 存储子组件传递的数据
const msg = ref({})

// 4. 父组件接收数据
const getChildData = (data) => {
  console.log('收到子组件数据：', data)
  msg.value = data // 存起来使用
}
</script>