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

Posted 2023-02-22

【中文标题】Vue中用于小部件非导入组件的未知自定义元素元素

【英文标题】：Unknown custom element element in Vue for a widget non-imported component

【发布时间】：2021-10-05 03:45:47

【问题描述】：

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

<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 将上面的警告显示为控制台错误。但是，我怎样才能解决这个问题或至少抑制这个特定的警告？

【参考方案1】：

您可以在 main.js 文件中注册该组件。 This 文章很好地解释了它。 你基本上只是要把这一行添加到你的新 Vue() 语句之前的主文件中。 希望对您有所帮助！

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

【讨论】：

谢谢，但正如您从我的问题中看到的那样，这不是我正在导入的组件。无论如何，我找到了一个解决方案，我将在这里发布。

【参考方案2】：

将 and 元素移动到 index.html 中，同时将小部件剪切标记保留在应该解决问题的位置。