时间戳

首页 > 解决方案 > Vue中用于小部件非导入组件的未知自定义元素元素

javascript - Vue中用于小部件非导入组件的未知自定义元素元素

问题描述

通常，人们会使用 Vue.component() 来注册一个导入的组件。但是，我在代码中包含了一个小部件片段，而不是导入的模块：

<template>
  <v-dialog>
      <script type="application/javascript" defer src="some/hosted/javascript/app.js"></script> 
      <link href="some/hosted/css/app.css" rel="stylesheet" />
      <example-vue-widget some-prop="some-data"></example-vue-widget>
  </v-dialog>
</template>

这是我根据本教程创建的一个使用 webpack 的小部件：https ://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97

这个小部件本质上是一个可以正常工作的第三方元素。

但是，我得到了这个：

[Vue warn]: Unknown custom element: <example-vue-widget> - did you register the
component correctly? For recursive components, make sure to provide the "name" option.

我理解为什么 Vue 将上面的警告显示为控制台错误。但是，我将如何解决这个问题或至少抑制这个特定的警告？

标签： javascripthtmlvue.jswebpackwidget

解决方案

您可以在 main.js 文件中注册该组件。 这篇文章很好地解释了它。您基本上只需在新的 Vue({}) 语句之前将此行添加到主文件中。希望这会有所帮助！

// Globally register your component
Vue.component('example-vue-widget', exampleVueWidget);

推荐阅读