如何防止命名空间 HTML 元素的 Vue 错误“未知自定义元素”

Posted 2023-02-23

【中文标题】如何防止命名空间 HTML 元素的 Vue 错误“未知自定义元素”

【英文标题】：How to prevent Vue error "Unknown custom element" for namespaced HTML elements

【发布时间】：2019-09-24 23:56:01

【问题描述】：

我在必须输出命名空间元素的环境中使用 Vue，例如<foo:aside>。 Vue 目前甚至没有以任何方式处理这些元素（将值绑定到属性，添加事件处理程序，等等），它们只是存在于模板中。但是，它们可能包含必须处理的子项，并且我包含用于显示变量的小胡子语法等，因此 v-pre 将禁用这些，因此不是我用例的解决方案。

一切正常，但控制台充斥着以下错误：

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

命名空间是通过 xmlns:foo 在根元素上定义的，但这对 Vue 没有任何影响。

有什么办法可以防止这种情况发生，通过某种方式告诉 Vue 忽略命名空间元素，或者至少定义在普通 html 元素上应该允许哪些命名空间？

【问题讨论】：

Vue ignore custom component tag的可能重复

对不起，我应该提到虽然元素本身没有被处理，但它们可能有确实使用 mustache-syntax 来显示变量等的子元素，所以 v-pre 不是解决方案我的情况。我将把它放在问题中。

【参考方案1】：

感谢linked possible duplicate（尽管我不同意它是重复的，因为它适用于整个命名空间并需要子元素才能工作）和 Silencesys 的评论，我最终得到了这个解决方案：

Vue.config.ignoredElements = [/^foo:/];

从 Vue 2.5 开始，您可以对 ignoredElements 使用正则表达式，这是忽略整个命名空间而无需添加所有可能的标记名称的完美方式，同时仍保留这些元素及其子元素的 Vue 功能。

【参考方案2】：

你可以使用v-pre告诉vue该元素应该被忽略，检查vue.js api。

例如：

<foo:aside v-pre>

【讨论】：

抱歉，我忘了说，必须处理这些命名空间元素的子元素是一个先决条件。我更新了问题以反映这一点。

好的，没问题，你试过把它定义为被忽略的元素吗？ vuejs.org/v2/api/#ignoredElements。但是，我现在不确定它是否只忽略给定的标签或其中的标签。