Vue.js 使用 Vanilla JS 触发自定义事件并在 Vue 实例上检测

在本文中，我们将介绍如何在 Vue.js 中使用 Vanilla JS（原生JavaScript）触发自定义事件，并在 Vue 实例上检测到这些事件。

Vue.js 是一个流行的 JavaScript 框架，专注于构建用户界面。它通过数据驱动的方式实现了组件化开发，使得开发者可以更容易地构建可维护和可扩展的前端应用程序。

在有些情况下，我们可能需要在 Vue 实例上触发一个自定义事件，然后在 Vue 组件中检测和处理这个事件。在这种情况下，我们可以使用 Vanilla JS 来触发自定义事件，并通过 Vue 提供的 $on 方法来监听和处理这些事件。

在 Vue 实例上触发自定义事件

我们可以使用以下代码在 Vue 实例上触发一个自定义事件：

const event = new CustomEvent('myEvent', { detail: { message: 'Hello from Vanilla JS!' } });
document.dispatchEvent(event);

上面的代码创建了一个自定义事件 myEvent，并设置了一个 detail 属性来传递一些数据。然后，我们通过 document.dispatchEvent 方法将这个事件派发到文档中。

在 Vue 组件中检测自定义事件

在 Vue 组件中，我们可以使用 $on 方法来监听和处理自定义事件。下面是一个示例代码：

export default {
  mounted() {
    document.addEventListener('myEvent', this.handleEvent);
  },
  methods: {
    handleEvent(event) {
      console.log(event.detail.message);
    }
  },
  destroyed() {
    document.removeEventListener('myEvent', this.handleEvent);
  }
}

在上面的代码中，我们在组件的 mounted 钩子中使用 document.addEventListener 方法来监听自定义事件 myEvent，并将其与 handleEvent 方法关联起来。在 handleEvent 方法中，我们可以访问事件的 detail 属性来获取传递的数据。

为了避免内存泄漏，我们在组件的 destroyed 钩子中使用 document.removeEventListener 方法来移除对事件的监听。

示例

下面是一个完整的示例，演示了如何在 Vue.js 中使用 Vanilla JS 触发自定义事件，并在 Vue 组件中检测和处理这个事件。

首先，创建一个 Vue 组件 App：

<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      const event = new CustomEvent('myEvent', { detail: { message: 'Hello from Vanilla JS!' } });
      document.dispatchEvent(event);
    }
  }
}
</script>

在上面的代码中，我们定义了一个按钮，当点击按钮时，会触发自定义事件 myEvent。

然后，在另一个 Vue 组件中监听这个自定义事件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    document.addEventListener('myEvent', this.handleEvent);
  },
  methods: {
    handleEvent(event) {
      this.message = event.detail.message;
    }
  },
  destroyed() {
    document.removeEventListener('myEvent', this.handleEvent);
  }
}
</script>

在上面的代码中，我们定义了一个 message 数据属性，用于保存触发自定义事件后传递的消息。在 mounted 钩子中监听自定义事件 myEvent，并将其与 handleEvent 方法关联起来。在 handleEvent 方法中，我们将事件的 detail.message 赋值给 message 属性。

最后，在 Vue 应用程序中使用这两个组件：

<template>
  <div>
    <app></app>
    <other-component></other-component>
  </div>
</template>

<script>
import App from './App.vue';
import OtherComponent from './OtherComponent.vue';

export default {
  components: {
    App,
    OtherComponent
  }
}
</script>

在上面的代码中，我们将 App 组件和 OtherComponent 组件作为根组件的子组件使用。