구성 요소 태그 내부는 알 수 없지만 구성 요소 태그 외부는 알 수 없는 "알 수 없는 사용자 지정 요소" 경고

구성 요소 태그 내부는 알 수 없지만 구성 요소 태그 외부는 알 수 없는 "알 수 없는 사용자 지정 요소" 경고

다음과 같은 컴포넌트를 만들었습니다.

<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] :알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공해야 합니다.

그<social-sharing>구성 요소가 Vue 플러그인에서 가져온 것입니다.이 기능을 사용하면<icon>외부 컴포넌트<social-sharing>태그는 정상적으로 동작하지만, 그 안에서 에러가 발생합니다.

이것은, 유저가 사용하고 있기 때문입니다.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>컴포넌트에 참조가 있습니다.

컴포넌트에서 스크립트 태그를 닫는 것을 잊어버렸습니다.

언급URL : https://stackoverflow.com/questions/46173821/unknown-custom-element-warning-inside-a-component-tag-but-not-outside-of-it