“未知自定义元素”警告位于组件标记内部，但不在其外部

我创建了一个像这样的组件：

<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>

在页面中使用它，如下所示：

<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>

但它抛出了这个错误：

[Vue warn]: 未知的自定义元素: - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

The <social-sharing>组件来自 Vue 插件。如果我用我的<icon>组件外部<social-sharing>标签它工作正常，但在它内部抛出错误。

这是因为您正在使用inline-template上的特殊属性<social-sharing>成分。

来自文档 https://v2.vuejs.org/v2/guide/components.html#Inline-Templates:

当子组件上存在 inline-template 特殊属性时，该组件将使用其内部内容作为其模板，而不是将其视为分布式内容。

里面的一切<social-sharing>标签被视为该组件的模板定义。而且，自从你的<icon>组件正在外部注册<social-sharing>组件的范围，它不知道如何处理<icon> tag.

因为它看起来像<social-sharing>组件依赖于inline-template定义，我唯一能想到做的就是注册<icon>全局组件：

// in your main.js file
import Icon from '~/comps/icon.vue'
Vue.component('Icon', Icon);

那么，自从<icon>组件将在全局范围内，<social-sharing>组件将有对其的引用。