如何使用 Typescript 在 Vue 应用程序中使用 webcomponents

Posted 2023-02-22

【中文标题】如何使用 Typescript 在 Vue 应用程序中使用 webcomponents

【英文标题】：How can I use webcomponents in a Vue application using Typescript

【发布时间】：2020-07-14 09:11:36

【问题描述】：

我正在尝试在我的 Vue 项目中使用 Web 组件。但是，它没有正确加载。我可以在我的 DOM 中看到该元素，但只是作为一个空标签，而不是它应该是的按钮。 我得到的第一个错误是没有声明模块，所以我根据 tsconst.d.ts 中错误消息的建议声明了一个：

declare module 'wc-button';

现在，我在 Vue 的控制台中收到警告，它是一个未知的自定义元素，如果我忘记在组件下注册它。但是，由于它是一个网络组件，我不认为它应该是。我可以通过将 Web 组件添加到 vue.config.ignoredElements 来使消息消失，但这只是隐藏消息。如果我将我的代码切换到 javascript，它工作正常。所以我希望我需要为它正确声明一个模块，但我不确定如何继续。有没有人可以比较的例子或回购？

我的组件：

<template>
  <div>
    <button class="btn btn-primary" @click="onClick()">
      Click!
    </button>
    <wc-button type="primary" @click="onClick()">
      Click
    </wc-button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import wcButton from 'wc-button';

export default Vue.extend(
    data: () => (
        buttonOutput: 'I was clicked!',
    ),
    methods: 
        onClick(): string 
            return this.buttonOutput;
        ,
    ,
);
</script>

【参考方案1】：

通过在启动 Vue 应用程序的我的 app.js 中导入 Web 组件找到了解决方法。这有点 hacky，但这让我可以避免所有阻碍我的打字稿问题。