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

Question

我在必须输出命名空间元素的环境中使用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元素上应允许使用哪些命名空间来防止这种情况发生？

Answer 1

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

例如：

<foo:aside v-pre>

Answer 2

由于linked possible duplicate（尽管由于应用于整个名称空间并需要子元素才能工作，所以我不同意它是重复的）和Silencesys的评论，所以我得出了以下解决方案：

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

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