Vue中如何监听自定义元素事件？答案

【问题标题】：How to listen to custom element events in Vue?Vue中如何监听自定义元素事件？
【发布时间】：2022-08-16 10:21:51
【问题描述】：

我正在使用自定义元素（特别是Material Web Components），但我无法弄清楚如何使用通常的v-on 语法来监听来自自定义元素的事件。

以下不起作用：

<mwc-drawer ref=\'drawer\' v-on=\'{\"MDCDrawer:opened\": opened}\'>

这样做的地方：

onMounted(() => {
    drawer.value.addEventListener(\'MDCDrawer:opened\', () => {
        console.log(\'opened\')
    })
})

当 Vue 认为它是原生元素（但实际上是自定义元素）时，它是否只监听原生事件而不是自定义事件？

您是否看过（并阅读过）Vue 文档：vuejs.org/guide/components/…
是的，我不相信文档中描述了这个特定的用例。有关于创建自定义元素的文档，但没有太多关于在 vue 应用程序中使用它们的文档。

标签： vuejs3 custom-element material-components-web

【解决方案1】：

解释

只有当我们发出自定义事件时，我们才能监听使用。在 mwc-drawer.vue 中，我们应该发出 MDCDrawer:opened 事件。然后我们可以使用 v-on={"MDCDrawer:opened": fn} 或 @MDCDrawer:opened="fn" 听

official site

演示

mwc-drawer.vue

<script setup lang="ts">
import { defineEmits } from 'vue'

const emit = defineEmits(['MDCDrawer:opened'])

function open() {
  // only when we emit the custom event, we can listen on use
  emit('MDCDrawer:opened', { text: 'Hello!!' })
}
</script>

home.vue

<template>
  <mwc-drawer ref='drawer' v-on='{"MDCDrawer:opened": opened}' />
</template>
<script setup lang="ts">
function opened(params) {
  console.log(params) // { text: 'Hello!!' }
}
</script>

【讨论】：