Vuejs 2.0+如何在Vue组件模板中使用扩展Web组件

时间:2019-11-26 09:01:03

标签: javascript vue.js vuejs2 nuxt.js web-component

我在Vue生态系统中根深蒂固,但是我正在学习的东西更多。我最近遇到了一个我不知道该如何处理的场景。

简而言之,有一个rollup版的JavaScript文件,其中包含一些webcomponents不是Vue。我想在Nuxtjs spa中使用它们。但是,在其他vue组件中使用这些组件被证明有点麻烦。

我尝试了多种方法,例如

  • 在本地(在docker化环境中),我可以通过更改src/app.html在链接的代码和框上将我的nuxt / vue spa夹在这些外部组件之间,但是它们不能正确显示
  • 我尝试通过v-html将组件绑定到vue组件模板
  • 我尝试了Vue.config.ignoredElements
  • 我尝试用注入脚本的脚本标签绑定组件

及其各种组合。我提供了一个codesandbox来玩。

要查看正确的行为,请转到/app.html,然后将第10-41行复制到一个空的本地html文件中,然后在浏览器中打开它。

有什么想法可以让它们变得更好玩吗?

到目前为止,我唯一发现的是这篇文章:

这是我产生Vue.config.ignoredElements想法的地方

0 个答案:

没有答案