“未知的自定义元素"在组件标签内发出警告，但不在其外 [英] "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 警告]:未知的自定义元素:-您是否正确注册了组件?对于递归组件，请确保提供名称"选项.
<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屋！
