“未知的自定义元素"在组件标签内发出警告,但不在其外 [英] "Unknown custom element" warning inside a component tag, but not outside of it
问题描述
我创建了一个这样的组件:
<span class="my-icon"><img :src="iSrc" :alt="iname"/></span></模板><脚本>导出默认{道具:['iname'],计算:{iSrc() {return require('../../../assets/images/' + this.iname + '.png')}}}
在这样的页面中使用它:
<div><h3>分享:</h3><social-sharing inline-template network-tag="a"><div class="my-icons"><network network="facebook" class="fb-icon"><图标名称="fb"/></网络>
</社交分享>
</模板><脚本>从'~/comps/icon.vue'导入图标导出默认{成分: {图标}}
但是它抛出了这个错误:
<块引用>[Vue 警告]:未知的自定义元素:-您是否正确注册了组件?对于递归组件,请确保提供名称"选项.
组件来自 Vue 插件.如果我在 <social-sharing>
标签之外使用我的
组件,它工作正常,但在它内部会引发错误.
这是因为您在
上使用了 inline-template
特殊属性> 组件.
来自文档:
<块引用>当子组件上存在 inline-template 特殊属性时,该组件将使用其内部内容作为其模板,而不是将其视为分布式内容.
<social-sharing>
标签内的所有内容都被视为该组件的模板定义.而且,由于您的
组件是在
组件范围之外注册的,它不知道如何处理
标签.
由于看起来 <social-sharing>
组件依赖于 inline-template
定义,我唯一能想到的就是注册
全局组件:
//在您的 main.js 文件中从'~/comps/icon.vue'导入图标Vue.component('图标', Icon);
然后,由于
组件将在全局范围内,
组件将引用它.>
I have created a component like this:
<template>
<span class="my-icon">
<img :src="iSrc" :alt="iname"/>
</span>
</template>
<script>
export default {
props: ['iname'],
computed: {
iSrc() {
return require('../../../assets/images/' + this.iname + '.png')
}
}
}
</script>
Using it inside a page like this:
<template>
<div>
<h3>Share it:</h3>
<social-sharing inline-template network-tag="a">
<div class="my-icons">
<network network="facebook" class="fb-icon">
<icon name="fb" />
</network>
</div>
</social-sharing>
</div>
</template>
<script>
import Icon from '~/comps/icon.vue'
export default {
components: {
Icon
}
}
</script>
But it's throwing this error:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
The <social-sharing>
component is from a Vue plugin. If I use my <icon>
component outside the <social-sharing>
tag it works fine, but inside it throws the error.
This is because you are using the inline-template
special attribute on the <social-sharing>
component.
From the documentation:
When the inline-template special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content.
Everything inside the <social-sharing>
tag is being treated as if it were the template definition for that component. And, since your <icon>
component is being registered outside the <social-sharing>
component's scope, it doesn't know what to do with the <icon>
tag.
Since it looks like the <social-sharing>
component is dependant on an inline-template
definition, the only thing I can think to do is register the <icon>
component globally:
// in your main.js file
import Icon from '~/comps/icon.vue'
Vue.component('Icon', Icon);
Then, since the <icon>
component will be in the global scope, the <social-sharing>
component will have a reference to it.
这篇关于“未知的自定义元素"在组件标签内发出警告,但不在其外的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!