[英]How can I use webcomponents in a Vue application using Typescript
I am trying to use a web component in my Vue project.我正在尝试在我的 Vue 项目中使用 Web 组件。 However, it is not properly loading.但是,它没有正确加载。 I can see the element in my DOM, but just as an empty tag, not the button it should be.我可以在我的 DOM 中看到该元素,但只是作为一个空标签,而不是它应该是的按钮。 First error I got was the there was no module declared, so I declared one based on suggestion of the error message in tsconst.d.ts:我得到的第一个错误是没有声明模块,所以我根据 tsconst.d.ts 中错误消息的建议声明了一个:
declare module 'wc-button';
Now, I get a warning in the console from Vue that it is an unknown custom element and if I forget to register it under components.现在,我在 Vue 的控制台中收到一条警告,指出这是一个未知的自定义元素,如果我忘记在 components 下注册它。 But, since it is a webcomponent, I don't believe that it should be.但是,由于它是一个 webcomponent,我认为它不应该是。 I can make the message go away by adding the web component to vue.config.ignoredElements, but that is just hiding the message.我可以通过将 web 组件添加到 vue.config.ignoredElements 来使消息消失,但这只是隐藏了消息。 If I switch my code to javascript, it works fine.如果我将代码切换到 javascript,它就可以正常工作。 So I expect I need to properly declare a module for it, but I am unsure how to proceed.所以我希望我需要为它正确声明一个模块,但我不确定如何继续。 Does anyone have examples or a repo which I could compare to?有没有人有我可以比较的例子或回购?
My component:我的组件:
<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>
Found a workaround by importing the web component in my app.js from where Vue app is started.通过在我的 app.js 中从 Vue 应用程序启动的位置导入 Web 组件,找到了一种解决方法。 It is a bit hacky, but this allows me to avoid all the typescript issues that were blocking me.这有点hacky,但这使我能够避免所有阻碍我的打字稿问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.