.vue 파일에서 다른 .vue 파일로 템플릿을 전달하십시오.

Question

this 튜토리얼을 따르려고합니다. 아래 코드를 사용하여 Modal이 표시됩니다.

<modal 
    v-model="showModal" 
    :animation-duration="animationDuration" 
    :close-on-click-away="closeOnClickAway" 
    > 

    <p slot="header">Confirmation needed</p> 

    <p slot="content">Do you want to continue?</p> 

    <template slot="actions"> 
     <div class="ui black deny button" 
      @click="showModal=false"> 
      No 
     </div> 
     <div class="ui positive right labeled icon button" 
      @click="confirm"> 
      Yes 
      <i class="checkmark icon"></i> 
     </div> 
    </template> 
</modal> 

여기에 내가 ModalBody.vue라는 이름의 또 다른 .vue 파일의 코드 부분 아래에 배치하고 싶습니다.

<p slot="header">Confirmation needed</p> 

<p slot="content">Do you want to continue?</p> 

<template slot="actions"> 
    <div class="ui black deny button" 
     @click="showModal=false"> 
     No 
    </div> 
    <div class="ui positive right labeled icon button" 
     @click="confirm"> 
     Yes 
     <i class="checkmark icon"></i> 
    </div> 
</template> 

은 그 때 나는

  <modal 
      v-model="showModal" 
      :animation-duration="animationDuration" 
      :close-on-click-away="closeOnClickAway" 
      > 
      <modal-body></modal-body>           
     </modal> 

아래처럼 해당 파일에 액세스하려고하지만 그것은 작동하지 않습니다. 콘솔에서도 오류가 발생하지 않습니다.

UPDATE

Parent.vue

<template> 
     <modal 
      v-model="showModal" 
      :animation-duration="animationDuration" 
      :close-on-click-away="closeOnClickAway" 
      > 
      <modal-body></modal-body>           
     </modal> 
    </div> 
</template> 
<script> 
    import ModalBody from './ModalBody'; 
    export default { 
     components: { ModalBody }, 
    } 
</script> 

Answer 1

사용 import

<template> 
    <!-- html code --> 
    <modal-body v-show="showModal"></modal-body>           
</template> 

<script> 
import modalBody from './ModalBody' 

export default { 
    components: { 
     childComponent 
    }, 
    data:() => ({ showModal: false }) 
} 
</script> 

UPDATE :

나는 최선을 다하고 있습니다 실수는 있지만, 그녀는 눈치 채 셨습니다. 구성 요소

그렇게

Parent.vue

<template> 
    <modal 
     v-model="showModal" 
     :animation-duration="animationDuration" 
     :close-on-click-away="closeOnClickAway" 
     > 
     <modal-body></modal-body>           
    </modal> 
</template> 

<script> 
import ModalBody from './ModalBody'; 
import modal from './modal'; 

export default { 
    components: { 
     ModalBody, 
     modal 
    } 
/* component code */ 
} 
</script> 

입니다 -

업데이트 된 코드가 너무

1. 태그 </div>
2. <modal> 실수를

   중요! 다른 구성 요소 나 요소를 구성 요소에 삽입하려면이 구성 요소 내부에 <slot></slot>이 있어야합니다. see

   또한 내 예제 응용 프로그램을 참조하십시오 https://codesandbox.io/s/3xyx386q65

   열린 '구성 요소/setProps/setProps.vue'