뷰 구성 요소 알 수없는

Question

이 같은 다른 내부 구성 요소를 구성하려고 :

<prompt :users="users"> 
... 
    <dataset v-for="ds in users" :user="user"></dataset> 
... 
</prompt> 

하지만 분명히 내가 제대로 등록되지 해요 :

여기

[Vue warn]: Unknown custom element: <dataset> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in root instance) 

는 난 방법 노력하면 등록하기 :

이

Vue.component('prompt', { 
    props: ['userdata', 'users'], 
    template: '#prompt-template',  
    components: { 
     'dataset': { 
      props: ['userdataset', 'user'], 
      template: '#dataset-template', 
     }   
    } 
}); 

app.js

마지막으로, 템플릿 :

<template id="dataset-template"> 
     <li>{{ user}}</li> 
    </template> 

    <template id="prompt-template"> 
     <transition name="modal"> 
      <div class="modal-mask"> 
       <div class="modal-wrapper"> 
        <div class="modal-container"> 

         <div class="modal-header"> 
          <slot name="header"> 
           default header 
          </slot> 
         </div> 

         <div class="modal-body"> 
          <slot name="body"> 

          </slot> 
         </div> 

         <div class="modal-footer"> 
          <slot name="footer"> 
           default footer 
           <button class="modal-default-button" @click="$emit('close')"> 
            OK 
           </button> 
          </slot> 
         </div> 
        </div> 
       </div> 
      </div> 
     </transition> 
    </template> 

은 내가 부족 어떤 단계가 있습니까? 구성 요소가 등록되지 않은 방법을 알 수 없습니다.

Answer 1

구성 요소 내의 슬롯에 dataset 구성 요소를 사용하는 것이 문제입니다. Vue VM이 구성 요소 트리를 알아내는 동안 알 수없는 dataset 구성 요소를 인식합니다. 하위 구성 요소는 구성 요소 템플리트에서 사용되지만 슬롯에서는 사용되지 않습니다.prompt 구성 요소처럼 Vue VM 내에 dataset 구성 요소를 등록해야합니다. 또한 구성 요소의 템플릿도 (서로 옆에) 동일한 수준에 등록되어 있기 때문에 동일한 수준의 구성 요소를 등록 할 말이이

Vue.component('promp', { ... }) 
Vue.component('dataset', { ... }) 

을보십시오. the example you mentioned in another answers comment과 비교하십시오 : 여기 하위 구성 요소 axis-label은 상위 polygraph 구성 요소의 템플릿 내에서만 사용됩니다. 이는 구성 요소가 vue-vm이 아닌 하위 구성 요소를 파악하기 위해 계약을 체결 한 이후 유효합니다. 환언

:

그것은 A의 하위되지 않은 성분 A의 슬롯에 부품을 전달할 수 있어야한다. 따라서 구성 요소의 슬롯으로 전달되는 모든 구성 요소는 vue VM에서 사용할 수 있어야합니다. 구성 요소가 다른 구성 요소 템플릿 내에 표시하지 않는 경우

엄지 손가락의 규칙이

될 수 있습니다, 그것은 하위하지 않습니다.