在组件外部的常规javascript中处理vueJs事件

我在常规网页上有一个VueJs组件。当它触发事件时，我希望常规web页面响应。这可能吗

Sites.vue是单个文件组件。它在一个普通的网页

中间被实例化。

<sites @pmds="handlePmds"></sites>

回到常规页面，我希望像这样处理事件：

    function handlePmds(e) {
      console.log(e);
    }

---

但这不起作用，因为

handlePmds

不是VueJS函数。那么，如何捕获该事件呢？

首先，在一个vueJS方法中创建一个简单的JS

CustomEvent

。有效负载数据位于名为

detail

methods: {
  sendPmds() {
    let event = new CustomEvent("pmds", { bubbles: true, detail: pmds });
    document.dispatchEvent(event);
  }

然后，在主JS页面中，像处理其他事件一样处理事件。在我的例子中，我使用数据填充jQuery自动完成字段：

document.addEventListener("pmds", function(event) {
  if (event.detail?.length) {
    $("#pmd").autocomplete("option", "source", event.detail);
  }

---

您打算如何处理

pmds

数据？我想用它来填充jQuery自动完成框。因此，用户使用

选择一个

站点

，当他们这样做时，它会发出一个事件，以便jQuery autocomplete获得标签/值对的列表。我认为您需要为您的问题添加更多的信息。否则，很难回答。据我所知，您不能直接侦听发出的Vue事件，但可以将数据设置为外部变量。所以，这实际上取决于您在这个自动完成框中如何使用它。我可以想象填充一个隐藏的html输入，但这不会给我填充自动完成框的通知。

document.addEventListener("pmds", function(event) {
  if (event.detail?.length) {
    $("#pmd").autocomplete("option", "source", event.detail);
  }