vue封装公共组件案例$event事件

在Vue.js中，封装公共组件并利用`v-on`或简写的`@`来处理自定义事件（通常是`$event`）是一个常见的做法。当我们在组件中需要与其他部分通信时，可以创建一个独立于业务逻辑的、可复用的功能模块，并通过事件系统进行数据传递。

例如，假设我们有一个通用的表单验证组件`FormValidator.vue`：

<template>
  <div @submit.prevent="validateForm($event)">
    <!-- ...表单内容... -->
  </div>
</template>

<script>
export default {
  methods: {
    validateForm(event) {
      // 验证逻辑...
      if (/* 表单验证成功 */) {
        this.$emit('form-valid', { message: '表单已验证' });
      } else {
        this.$emit('form-invalid', { message: '表单验证失败，请检查' });
      }
    },
  },
};
</script>

在这个例子中，当表单提交时，`validateForm`方法会被触发。如果验证成功，它会通过`this.$emit`发射名为`form-valid`的自定义事件，并传递验证结果。外部组件可以监听这个事件，以便采取相应的动作：

<template>
  <FormValidator :on-form-valid="handleValidationSuccess" :on-form-invalid="handleValidationFailure"></FormValidator>
</template>

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

export default {
  components: {
    FormValidator,
  },
  methods: {
    handleValidationSuccess({ message }) {
      console.log('验证成功:', message);
    },
    handleValidationFailure(error) {
      console.error('验证失败:', error.message);
    },
  },
};
</script>

这样，`FormValidator`组件就作为一个公共工具，在多个地方使用，只需要关注如何响应`form-valid`和`form-invalid`这两个事件。