pass template from a .vue file to another .vue file - vuejs2

Question

I am trying to follow this tutorial. I am getting a Modal using below code.
<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>
Here I would like to place below portion of the code in another .vue file named ModalBody.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>
Then I am trying to access that file like below
<modal
v-model="showModal"
:animation-duration="animationDuration"
:close-on-click-away="closeOnClickAway"
>
<modal-body></modal-body>
</modal>
But it is not working. Even I am not getting any error in console.
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

use 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:
I committed mistakes, but your noticed her.
your updated code have mistakes too
tag </div>
<modal> - is a component
so
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>
important!
If you want to insert another component or element into the component, then inside this component there must be a <slot></slot>. see
also see my example app: https://codesandbox.io/s/3xyx386q65
open 'components/setProps/setProps.vue'