[英]Vue ignore custom component tag
On my site I am using Google CSE (custom search engine by google).在我的网站上,我使用的是 Google CSE(google 的自定义搜索引擎)。
Here is my HTML:这是我的 HTML:
<div id="app">
...
<gcse:search></gcse:search>
...
</div>
<script type="text/javascript">
new Vue({ el: '#app' })
</script>
As you can see, I have a "gcse input" placed inside of my vue application.如您所见,我在我的 vue 应用程序中放置了一个“gcse 输入”。
Therefore I am getting a warning:因此我收到警告:
[Vue warn]: Unknown custom element:
<gcse:search>
[Vue 警告]:未知的自定义元素:<gcse:search>
So my question is how it possible to stop attempting to initialize this custom component in Vue.js?所以我的问题是如何停止尝试在 Vue.js 中初始化这个自定义组件?
Thanks in advance.提前致谢。
Vue thinks that you are trying to load a Vue component named gcse:search
. Vue 认为您正在尝试加载一个名为gcse:search
的 Vue 组件。
In order to ignore this tag, add the v-pre
directive :为了忽略这个标签,添加v-pre
指令:
<gcse:search v-pre></gcse:search>
Or, you could add the gcse:search
tag to Vue's list of ignoredElements :或者,您可以将gcse:search
标签添加到 Vue 的ignoreElements列表中:
Vue.config.ignoredElements = ['gcse:search']
In addition to the answer of thanksd , you can ignore the unknown tags by adding these tags in the ignoredElements property:除了thanksd的答案,您可以通过在ignoreElements 属性中添加这些标签来忽略未知标签:
Vue.config.ignoredElements = ['gcse:search']
And you can also ignore these tags by using regex instead of using strings:您还可以使用正则表达式而不是字符串来忽略这些标签:
Vue.config.ignoredElements = [/gcse:*/]
This is very useful if you want to ignore more tags/components with a specific pattern.如果您想忽略更多具有特定模式的标签/组件,这非常有用。 In this case, you could ignore all tags starting with "gcse"在这种情况下,您可以忽略所有以“gcse”开头的标签
In Vue 3 it's different.在Vue 3中,情况有所不同。
There are two ways to configure it.有两种配置方法。
runtime compiler
1.如果您使用的是runtime compiler
Note that this will not work if you are using runtime-only build
请注意,如果您使用runtime-only build
,这将不起作用
const app = createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')
runtime-only build
2. 使用runtime-only build
Here you have to add a rule in webpack.config.js
for vue-loader
这里你必须在webpack.config.js
中为vue-loader
添加一个规则
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
options: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('ion-')
}
}
}
// ...
]
if you are using laravel-mix
the pervious ways will not work for you, the right way is to pass options
in vue function of laravel-mix
如果你正在使用laravel-mix
,以前的方法对你不起作用,正确的方法是在laravel-mix
的 vue 函数中传递options
mix.js('resources/js/app.js', 'public/js')
.vue({
options: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('ion-')
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.