在 Vue 自定义事件中，父组件如何接收子组件传递的多个参数？

最后更新：1/13/2026

AI 助手

会员专享功能

只有会员才能使用 AI 生成答案功能。 立即升级

Other Answers (1)

Vue 自定义事件：父组件接收子组件传递的多个参数

在 Vue 中，子组件向父组件传递多个参数主要通过自定义事件实现。以下是几种常见的方法：

1. 使用 $emit 传递多个参数（最常用）

子组件：传递多个参数

xml 
<!-- ChildComponent.vue -->
<template>
  <button @click="sendData">发送数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      // 传递多个参数
      this.$emit('custom-event', 
        '参数1', 
        123, 
        { name: '对象参数' },
        ['数组', '参数']
      );
    }
  }
}
</script>

父组件：接收多个参数

handlebars 
<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @custom-event="handleEvent" />
    <div>接收到的数据：{{ receivedData }}</div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: null
    };
  },
  methods: {
    // 参数按顺序接收
    handleEvent(param1, param2, param3, param4) {
      console.log('参数1:', param1); // '参数1'
      console.log('参数2:', param2); // 123
      console.log('参数3:', param3); // { name: '对象参数' }
      console.log('参数4:', param4); // ['数组', '参数']
      
      this.receivedData = {
        param1,
        param2,
        param3,
        param4
      };
    }
  }
}
</script>

2. 使用对象传递多个参数（推荐）

子组件：传递对象

xml 
<!-- ChildComponent.vue -->
<template>
  <button @click="sendObject">发送对象数据</button>
</template>

<script>
export default {
  methods: {
    sendObject() {
      // 将多个参数封装为对象
      this.$emit('object-event', {
        name: '张三',
        age: 25,
        address: '北京',
        scores: [90, 85, 88]
      });
    }
  }
}
</script>

父组件：接收对象

xml 
<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @object-event="handleObject" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleObject(data) {
      console.log('姓名:', data.name);
      console.log('年龄:', data.age);
      console.log('地址:', data.address);
      console.log('分数:', data.scores);
      
      // 使用解构赋值
      const { name, age, address, scores } = data;
      console.log(`姓名: ${name}, 年龄: ${age}`);
    }
  }
}
</script>

3. 使用数组传递多个参数

子组件：传递数组

xml 
<!-- ChildComponent.vue -->
<template>
  <button @click="sendArray">发送数组数据</button>
</template>

<script>
export default {
  methods: {
    sendArray() {
      this.$emit('array-event', ['第一个参数', 100, { key: 'value' }]);
    }
  }
}
</script>

父组件：接收数组

xml 
<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @array-event="handleArray" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleArray(paramsArray) {
      console.log('参数1:', paramsArray[0]); // '第一个参数'
      console.log('参数2:', paramsArray[1]); // 100
      console.log('参数3:', paramsArray[2]); // { key: 'value' }
      
      // 使用解构赋值
      const [first, second, third] = paramsArray;
      console.log(`第一个参数: ${first}, 第二个参数: ${second}`);
    }
  }
}
</script>

4. 使用 Vue 3 的 Composition API

Vue 3 子组件

xml 
<!-- ChildComponent.vue -->
<template>
  <button @click="emitData">发送数据</button>
</template>

<script setup>
import { defineEmits } from 'vue';

// 定义可触发的事件
const emit = defineEmits(['multi-params']);

const emitData = () => {
  // 传递多个参数
  emit('multi-params', '参数1', 42, { data: '对象' });
};
</script>

Vue 3 父组件

xml 
<!-- ParentComponent.vue -->
<template>
  <child-component @multi-params="handleParams" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const handleParams = (param1, param2, param3) => {
  console.log('接收到的参数:', param1, param2, param3);
};
</script>

5. 使用事件修饰符（Vue 3）

子组件

dust 
<!-- ChildComponent.vue -->
<template>
  <button @click="$emit('update:modelValue', { name: '新值', count: 5 })">
    更新数据
  </button>
</template>

父组件

xml 
<!-- ParentComponent.vue -->
<template>
  <child-component 
    v-model="formData"
    @update:modelValue="handleUpdate"
  />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      formData: {
        name: '',
        count: 0
      }
    };
  },
  methods: {
    handleUpdate(newValue) {
      console.log('新值:', newValue);
      this.formData = newValue;
    }
  }
}
</script>

最佳实践建议

  1. 使用对象传递多个参数（最推荐）

    • 代码可读性更好
    • 参数顺序不重要
    • 易于扩展和维护

  2. 明确参数命名

    javascript 
    // 推荐
this.$emit('user-updated', {
  userId: 123,
  userName: '张三',
  userRole: 'admin'
});

// 不推荐
this.$emit('user-updated', 123, '张三', 'admin');

  3. 使用 TypeScript 增强类型安全（Vue 3）

    typescript 
    // 子组件
const emit = defineEmits<{
  (e: 'submit', data: { name: string, age: number }): void
}>();

// 父组件
const handleSubmit = (data: { name: string, age: number }) => {
  // 类型安全的处理
};

  4. 文档化事件接口

    xml 
    <!-- ChildComponent.vue -->
<script>
export default {
  emits: {
    // 带验证的自定义事件
    'custom-event': (param1, param2, param3) => {
      // 验证参数
      return param1 && typeof param2 === 'number';
    }
  }
}
</script>

总结

父组件接收子组件传递的多个参数主要有以下几种方式：

  • 直接传递多个参数：简单直接，但参数顺序固定
  • 使用对象封装：最推荐的方式，提高代码可读性和维护性
  • 使用数组：适合处理同类型数据
  • Vue 3 Composition API：更现代化的写法

在实际开发中，建议优先使用对象方式传递多个参数，这样代码更清晰，也更容易扩展和维护。