Vue忽略自定义组件标签

Question

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

这是我的 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 directive:

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

---

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

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