组件标记内的"未知自定义元素"警告,但不在其外部

Question

我创建了一个这样的组件:

<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警告]:未知的自定义元素: - 您是否正确注册了组件？对于递归组件,请确保提供"名称"选项.

该<social-sharing>组件来自Vue插件.如果我<icon>在<social-sharing>标记之外使用我的组件它可以正常工作,但它内部会抛出错误.

Answer 1

这是因为您inline-template在<social-sharing>组件上使用特殊属性.

从文档:

当内联模板特殊属性出现在子组件上时,组件将使用其内部内容作为其模板,而不是将其视为分布式内容.

<social-sharing>标记内的所有内容都被视为该组件的模板定义.而且,由于您的<icon>组件是在<social-sharing>组件范围之外注册的,因此它不知道如何处理<icon>标记.

由于<social-sharing>组件看起来依赖于inline-template定义,我唯一能想到的就是<icon>全局注册组件:

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

然后,由于<icon>组件将在全局范围内,因此<social-sharing>组件将具有对它的引用.