自定义事件

在 Vue 中，自定义事件是一种强大的机制，用于在组件之间进行通信。通过自定义事件，父组件可以监听子组件的事件，并在事件触发时执行相应的操作。以下是 Vue 自定义事件的详细使用方法和示例。

1. 自定义事件的基本使用

1.1 在子组件中触发事件

在子组件中，可以使用 $emit 方法触发自定义事件。$emit 接收事件名称和可选的参数。

// 子组件 ChildComponent.vue
<template>
  <button @click="handleClick">Click Me</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      // 触发自定义事件，并传递参数
      this.$emit('custom-event', { message: 'Hello from child!' });
    }
  }
};
</script>

1.2 在父组件中监听事件

在父组件中，可以通过 v-on 或 @ 监听子组件触发的自定义事件，并定义相应的处理函数。

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(payload) {
      console.log(payload.message); // 输出: Hello from child!
    }
  }
};
</script>

2. 使用 `.native` 修饰符

如果需要监听子组件原生 DOM 事件（如 click），可以使用 .native 修饰符。

<template>
  <ChildComponent @click.native="handleClick" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Native click event');
    }
  }
};
</script>

3. 使用 `.sync` 修饰符

Vue 2.x 提供了 .sync 修饰符，用于实现父子组件之间的双向绑定。虽然 Vue 3 中不再推荐使用 .sync，但在 Vue 2 中仍然可以使用。

// 子组件 ChildComponent.vue
<template>
  <button @click="increment">Increment</button>
</template>
<script>
export default {
  props: {
    value: Number
  },
  methods: {
    increment() {
      this.$emit('update:value', this.value + 1);
    }
  }
};
</script>

// 父组件 ParentComponent.vue
<template>
  <ChildComponent :value.sync="count" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    };
  }
};
</script>

4. 使用事件总线（Event Bus）

在 Vue 2.x 中，事件总线是一种全局事件系统，用于在非父子组件之间通信。虽然 Vue 3 推荐使用 VueX 或 Composition API，但在 Vue 2 中仍然可以使用事件总线。

1
2
3

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件 A
import { EventBus } from './eventBus.js';
export default {
  methods: {
    emitEvent() {
      EventBus.$emit('custom-event', { message: 'Hello from Component A!' });
    }
  }
};

// 组件 B
import { EventBus } from './eventBus.js';
export default {
  mounted() {
    EventBus.$on('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(payload) {
      console.log(payload.message); // 输出: Hello from Component A!
    }
  }
};

5. 使用 VueX 或 Composition API

在 Vue 3 中，推荐使用 VueX 或 Composition API 来管理跨组件的状态，而不是依赖自定义事件或事件总线。

使用 VueX

// store.js
import { createStore } from 'vuex';
export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count += 1;
    }
  }
});

// 组件 A
<template>
  <button @click="increment">Increment</button>
</template>
<script>
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore();
    const increment = () => {
      store.commit('increment');
    };
    return { increment };
  }
};
</script>

// 组件 B
<template>
  <div>{{ count }}</div>
</template>
<script>
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore();
    const count = computed(() => store.state.count);
    return { count };
  }
};
</script>

6. 总结

Vue 的自定义事件是父子组件通信的核心机制之一。通过 $emit 和 v-on，可以轻松地在父子组件之间传递数据和触发操作。此外，Vue 2 中的事件总线和 Vue 3 中的 VueX/Composition API 提供了更灵活的跨组件通信方式。
合理使用自定义事件和状态管理工具，可以帮助你构建更加高效、可维护的 Vue 应用程序。