vue | 子组件用 emits 发送多个参数 | 父组件如何处理

在 Vue 中，子组件通过 `emits` 功能可以向父组件发送多个参数。`emit` 是用于触发自定义事件的方式，它允许子组件通知其父组件状态变化。如果你想从子组件发出并传递多个参数，你可以这样做：

// 子组件
<template>
  <button @click="sendMultipleParams">点击发送数据</button>
</template>

<script>
export default {
  methods: {
    sendMultipleParams(data1, data2) {
      this.$emit('parentEvent', data1, data2);
    }
  }
}
</script>

在这个例子中，当用户点击按钮时，`sendMultipleParams` 方法会被调用，它会将两个参数 `data1` 和 `data2` 发送给父组件。

然后，在父组件的模板里，你需要绑定这个自定义事件，并提供相应的处理逻辑：

<!-- 父组件 -->
<template>
  <ChildComponent @parentEvent="handleMultipleParams" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMultipleParams(data1, data2) {
      console.log('收到的数据:', data1, data2); // 这里可以对数据做进一步的操作
    }
  }
}
</script>

在这里，`@parentEvent` 是事件修饰符，`handleMultipleParams` 函数会在接收到子组件传递的参数时被调用。