Для передачи компонента в директиву с помощью пропсов необходимо создать пропс `component`, который будет принимать компонент. Затем внутри директивы можно использовать этот пропс для обертки компонента в попап.
Пример:
```javascript
// Ваш компонент
<template>
<div>
<button @click="openPopup">Открыть попап</button>
<my-popup v-if="showPopup" :component="myComponent" @close="closePopup" />
</div>
</template>
<script>
import MyPopup from './MyPopup.vue';
export default {
data() {
return {
showPopup: false,
myComponent: YourComponent,
};
},
methods: {
openPopup() {
this.showPopup = true;
},
closePopup() {
this.showPopup = false;
},
},
};
</script>
// Ваша директива
<template>
<div class="popup" v-show="show">
<div class="popup-content">
<button @click="close">Закрыть попап</button>
<!-- Компонент передается через пропс component -->
<component :is="component" />
</div>
</div>
</template>
<script>
export default {
props: {
component: {
type: Object,
},
},
data() {
return {
show: true,
};
},
methods: {
close() {
this.show = false;
this.$emit('close');
},
},
};
</script>
```
В этом примере при нажатии на кнопку "Открыть попап" в компоненте будет отображаться попап с переданным компонентом. При нажатии на кнопку "Закрыть попап" попап закроется.