在 Vue 定义的 Web 组件（自定义元素）上公开函数

Question

Per the Vue docs, it's possible to build components in Vue (v3) and package them as native Web Components 用于任何框架或 none。

正如我已经发现的那样，Vue 组件和 Web 组件的设计模型之间的差距可能会使这个想法变得复杂，有时甚至是一个直截了当的坏主意（在什么时候继续构建会更好、更易于维护完全原生的组件？）...但是让我们暂时假设它在这里是必要的。

我的问题 - 在 Vue 构建的 Web 组件上（向父节点）公开类似函数的界面的最佳方法是什么？

Vue 文档讨论了通过 props/slots 传递反应性数据，以及从组件发布自定义事件，但我没有看到提及从外部接受函数调用（或一口气，事件）。据我所知，这是一个非常有力的假设，即 app/page 其余部分的数据和事件流以非常“类似 Vue 的方式”工作？

Answer 1

目前，我的解决方法是在 onMounted() 中查找主机元素（根据），然后只设置此时所需的任何额外属性（希望它们不应该在 Vue 组件安装之前不需要，因为我不知道 Vue 完成安装自定义元素时引发的任何外部事件。

这样，该函数仍然可以在设置函数的上下文中定义并从中访问 variables/etc - 但可以由页面上仅引用该元素的其他元素调用，不是 Vue 组件。

虽然不能说我很喜欢它:

<template>
  <div ref="someElInTemplate">...</div>
</template>

<script lang="ts">
interface MyCoolHTMLElement extends HTMLElement {
  myCoolFunction: () => void;
}
</script>

<script setup lang="ts">

const someElInTemplate = ref<HTMLElement>();

function myCoolFunction() { }

onMounted(() => {
  const hostNode = (
    somElInTemplate.value?.getRootNode() as ShadowRoot | undefined
  )?.host as MyCoolHTMLElement;

  hostNode.myCoolFunction = myCoolFunction;
});
</script>

在 Vue 定义的 Web 组件（自定义元素）上公开函数

Exposing functions on a Vue-defined Web Component (Custom Element)

web-component

vue.js

vuejs3