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

在 Vue 中，父组件可以通过自定义事件接收子组件传递的多个参数。子组件使用 $emit 触发事件时，可以传递多个参数，父组件在监听事件时通过方法接收这些参数。

1. 子组件传递多个参数

子组件通过 $emit 触发事件时，可以传递多个参数。

示例

<!-- ChildComponent.vue -->
<template>
  <button @click="handleClick">点击传递多个参数</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const param1 = '参数1';
      const param2 = '参数2';
      this.$emit('custom-event', param1, param2);
    }
  }
};
</script>

说明

$emit：触发自定义事件，并传递多个参数。

2. 父组件接收多个参数

父组件在监听子组件的自定义事件时，可以通过方法接收多个参数。

示例

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent"></ChildComponent>
    <p>参数1: {{ param1 }}</p>
    <p>参数2: {{ param2 }}</p>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      param1: '',
      param2: ''
    };
  },
  methods: {
    handleCustomEvent(param1, param2) {
      this.param1 = param1;
      this.param2 = param2;
    }
  }
};
</script>

说明

@custom-event：监听子组件的自定义事件。
handleCustomEvent：父组件的方法，接收子组件传递的多个参数。

3. 使用对象传递多个参数

如果参数较多，可以将多个参数封装为一个对象传递。

示例

<!-- ChildComponent.vue -->
<template>
  <button @click="handleClick">点击传递多个参数</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const params = {
        param1: '参数1',
        param2: '参数2'
      };
      this.$emit('custom-event', params);
    }
  }
};
</script>

父组件接收

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent"></ChildComponent>
    <p>参数1: {{ params.param1 }}</p>
    <p>参数2: {{ params.param2 }}</p>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      params: {
        param1: '',
        param2: ''
      }
    };
  },
  methods: {
    handleCustomEvent(params) {
      this.params = params;
    }
  }
};
</script>

说明

对象传递：将多个参数封装为一个对象，简化参数传递。

4. 使用解构赋值接收参数

在父组件中，可以使用解构赋值直接接收多个参数。

示例

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent"></ChildComponent>
    <p>参数1: {{ param1 }}</p>
    <p>参数2: {{ param2 }}</p>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      param1: '',
      param2: ''
    };
  },
  methods: {
    handleCustomEvent(...params) {
      [this.param1, this.param2] = params;
    }
  }
};
</script>

说明

解构赋值：使用 ...params 接收所有参数，并通过解构赋值分配给对应的变量。

5. 使用事件对象

如果子组件传递的参数较多，可以将参数封装为一个事件对象。

示例

<!-- ChildComponent.vue -->
<template>
  <button @click="handleClick">点击传递多个参数</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const event = {
        param1: '参数1',
        param2: '参数2'
      };
      this.$emit('custom-event', event);
    }
  }
};
</script>

父组件接收

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent"></ChildComponent>
    <p>参数1: {{ event.param1 }}</p>
    <p>参数2: {{ event.param2 }}</p>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      event: {
        param1: '',
        param2: ''
      }
    };
  },
  methods: {
    handleCustomEvent(event) {
      this.event = event;
    }
  }
};
</script>