首页 文章

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

提问于
浏览 次
6

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

<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插件 . 如果我在 <social-sharing> 标签之外使用我的 <icon> 组件，它可以正常工作，但在其内部会抛出错误 .

vuejs2 vue-component

2 回答

  • 11

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

    来自documentation：

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

    <social-sharing> 标记内的所有内容都被视为该组件的模板定义 . 并且，因为您的 <icon> 组件正在 <social-sharing> 组件之外注册's scope, it doesn'知道如何处理 <icon> 标签 .

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

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

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

    回复于
  • -3

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

    回复于

相关问题