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

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警告:未知的自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。

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

Answer 1

这是因为您在<social-sharing>组件上使用了<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>组件将具有对它的引用。

Answer 2

我只是忘了关闭组件中的脚本标记。