Vue忽略自定义组件标签

Question

在我的网站上，我使用的是 Google CSE（google 的自定义搜索引擎）。

这是我的 HTML：

<div id="app">
  ...
  <gcse:search></gcse:search>
  ...
</div>
<script type="text/javascript">
    new Vue({ el: '#app' })
</script>

如您所见，我在我的 vue 应用程序中放置了一个“gcse 输入”。

因此我收到警告：

[Vue 警告]：未知的自定义元素： <gcse:search>

所以我的问题是如何停止尝试在 Vue.js 中初始化这个自定义组件？

提前致谢。

Answer 1

Vue 认为您正在尝试加载一个名为gcse:search的 Vue 组件。

为了忽略这个标签，添加v-pre指令：

<gcse:search v-pre></gcse:search>

---

或者，您可以将gcse:search标签添加到 Vue 的ignoreElements列表中：

Vue.config.ignoredElements = ['gcse:search']

Answer 2

除了thanksd的答案，您可以通过在ignoreElements 属性中添加这些标签来忽略未知标签：

Vue.config.ignoredElements = ['gcse:search']

您还可以使用正则表达式而不是字符串来忽略这些标签：

Vue.config.ignoredElements = [/gcse:*/]

如果您想忽略更多具有特定模式的标签/组件，这非常有用。 在这种情况下，您可以忽略所有以“gcse”开头的标签

Answer 3

在Vue 3中，情况有所不同。

有两种配置方法。

1.如果您使用的是runtime compiler

请注意，如果您使用runtime-only build ，这将不起作用

const app = createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')

2. 使用runtime-only build

这里你必须在webpack.config.js中为vue-loader添加一个规则

rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('ion-')
      }
    }
  }
  // ...
]

额外的

如果你正在使用laravel-mix ，以前的方法对你不起作用，正确的方法是在laravel-mix的 vue 函数中传递options

mix.js('resources/js/app.js', 'public/js')
 .vue({
 options: {
  compilerOptions: {
   isCustomElement: tag => tag.startsWith('ion-')
  }
 }
})

参考：

1. https://v3.vuejs.org/guide/migration/global-api.html#config-ignoredelements-is-now-config-compileroptions-iscustomelement
2. https://v3.vuejs.org/guide/migration/custom-elements-interop.html#_2-x-syntax
3. https://vue-loader.vuejs.org/guide/#manual-setup