面试题：Vue中如何编程式触发和监听自定义事件及其常见应用场景

Question

在Vue组件中，说明如何通过编程方式触发一个自定义事件，并监听该事件。请举例阐述至少两种在实际开发中可能用到这种编程式事件触发与监听的场景。

Answer 1

1. 通过编程方式触发和监听自定义事件

在Vue组件中，通过$emit方法触发自定义事件，通过在父组件模板中使用v - on（缩写为@）来监听。

示例代码如下：

<template>
  <div>
    <child - component @custom - event="handleCustomEvent"></child - component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('监听到自定义事件，数据为：', data);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="triggerCustomEvent">触发自定义事件</button>
</template>

<script>
export default {
  methods: {
    triggerCustomEvent() {
      const data = { message: '来自子组件的数据' };
      this.$emit('custom - event', data);
    }
  }
};
</script>

2. 实际开发场景

场景一：表单提交

• 父组件有一个表单，子组件是表单中的某个输入框或一组输入框。当用户在子组件中完成输入并满足一定条件（如输入格式正确等），子组件通过触发自定义事件通知父组件可以进行表单提交了。父组件监听该事件，获取子组件传递的数据并处理表单提交逻辑。

<template>
  <form>
    <input - component @input - valid="submitForm"></input - component>
  </form>
</template>

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

export default {
  components: {
    InputComponent
  },
  methods: {
    submitForm(data) {
      // 处理表单提交逻辑，data为子组件传递的输入数据
      console.log('提交表单，数据为：', data);
    }
  }
};
</script>

<!-- InputComponent.vue -->
<template>
  <input type="text" @input="checkInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    checkInput() {
      // 假设输入长度大于3为有效
      if (this.inputValue.length > 3) {
        this.$emit('input - valid', this.inputValue);
      }
    }
  }
};
</script>

场景二：模态框操作

• 父组件中有一个模态框组件，子组件是模态框内的确认按钮。当用户点击确认按钮时，子组件触发自定义事件通知父组件用户的确认操作，父组件监听该事件并处理后续逻辑，如关闭模态框、保存数据等。

<template>
  <modal - component @confirm - click="handleConfirm"></modal - component>
</template>

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

export default {
  components: {
    ModalComponent
  },
  methods: {
    handleConfirm() {
      // 处理确认后的逻辑，如关闭模态框
      console.log('用户点击了确认按钮');
    }
  }
};
</script>

<!-- ModalComponent.vue -->
<template>
  <div class="modal">
    <button @click="confirmClick">确认</button>
  </div>
</template>

<script>
export default {
  methods: {
    confirmClick() {
      this.$emit('confirm - click');
    }
  }
};
</script>