vue2 keep-alive缓存的组件，交互事件如何传递

`keep-alive` 是 Vue 内置的一个组件，可以在内部缓存动态组件，避免每次重新渲染。在使用 `keep-alive` 缓存组件时，交互事件是不会被触发的，因为组件并没有被销毁和重新创建。

如果需要在缓存组件中传递交互事件，可以通过以下两种方式：

1. 使用 Vuex 管理组件状态，并在交互事件中触发对应的 Vuex Action。这样即使组件被缓存，状态仍然存在，可以被读取和修改。

2. 在需要缓存的组件中使用 `activated` 和 `deactivated` 生命周期钩子函数。当组件被激活时（从缓存中取出并显示），触发 `activated` 钩子函数，在该函数中添加事件监听器；当组件被停用时（缓存到内存中），触发 `deactivated` 钩子函数，在该函数中移除事件监听器。这样可以在缓存组件中继续使用交互事件。

例如：

<template>
  <div>
    <button @click="count++">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  activated() {
    this.$el.addEventListener('mousemove', this.handleMouseMove);
  },
  deactivated() {
    this.$el.removeEventListener('mousemove', this.handleMouseMove);
  },
  methods: {
    handleMouseMove(event) {
      console.log(event.clientX, event.clientY);
    }
  }
};
</script>

注意：如果使用第二种方式，需要确保事件监听器正确添加和移除，避免出现重复添加或未移除的情况。