Как в модальное окно вставлять нужный компонент во Vue?

Question

[Николай Семенов]

Всем привет!
Есть вот такой компонент модального окна

<template lang="pug">
  div(class="modal__wrap" :class="[selectedComponent ? 'visible' : false]" @click="selectedComponent = ''")
    div(class="modal")
      div(class="modal__close" @click="selectedComponent = ''")
      div {{ selectedComponent }}
      component(:is="selectedComponent")
</template>

<script>
import { eventBus } from '@/main'
import WhoAreYou from './WhoAreYou.vue'
import SearchingControl from './SearchingControl.vue'
export default {
  data () {
    return {
      isShow: false,
      selectedComponent: ''
    }
  },
  components: {
    WhoAreYou,
    SearchingControl
  },
  created () {
    eventBus.$on('ShowComponent', (component) => {
      // this.isShow = val
      this.selectedComponent = component
    })
  }
}
</script>

есть вот такой компонент кастомного "инпута"

<template lang="pug">
  app-modal  
    ul.signup-control
      li
        div(id="male" class="radio" @click="chooseGender('Мужчина')" :class="[value==='Мужчина' ? 'active' : false]") 
        span Мужчина
      li
        div(id="female" class="radio" @click="chooseGender('Женщина')" :class="[value==='Женщина' ? 'active' : false]")
        span Женщина
</template>

<script>
import Modal from './Modal.vue'

export default {
  props: ['value'],
  components: {
    appModal: Modal
  },
  methods: {
    chooseGender (gender) {
      this.$emit('input', gender)
    }
  }
}
</script>

в родительском компоненте я слежу за состояние кастомного инпута

form.sign-up__form
        div.sign-up__form-field
          label(class="sign-up__label" @click.prevent="passControl('WhoAreYou')") {{ gender }}
          who-are-you(v-model="gender")
import { eventBus } from '@/main'
import WhoAreYou from '../components/WhoAreYou.vue'
import SearchingControl from '../components/SearchingControl.vue'
import Modal from '../components/Modal.vue'
export default {
  data () {
    return {
      gender: 'Я',
      iSearch: 'Ищу',
      selectedControl: 'WhoAreYou'
    }
  },
  components: {
    WhoAreYou,
    appModal: Modal,
    SearchingControl
  },
  methods: {
    passControl (control) {
      eventBus.$emit('ShowComponent', control)
      // this.selectedControl = control
    },
    openControl () {
      eventBus.$emit('ShowControl', true)
    }
  }
}
</script>

Вопрос в том как мне передать в модальное окно, нужный компонент, при этом чтоб в родительском я знал что выбрали?
При той реализации что сейчас модальное окно пустое. вместо него текст ()
хотя видно что название компонента передается

Answer 1

[Evgeny Kulakov]

Может я не все понял, но какое-то странное использование...
Не проще вставить в шаблон модального окна слот и передавать туда нужный контент:

<template> // modal template
<div>
<slot></slot>
</div>
</template>

В родителе:

<template>
<modal>
  <custom-input></custom-input>
</modal>
</template>

Comments

[Николай Семенов]

все правильно поняли.
пробовал так, но тогда по клику на тригер открывается все модалы на странице

[Evgeny Kulakov]

Николай Семенов: ну надо полечить это имхо, а не пилить костыль)

[Николай Семенов]

Evgeny Kulakov: я не сообразил как передать что нужно именно это окно открыть, потому решил что такое решение не подойдет. Если знаете как - подскажите

[Evgeny Kulakov]

Я чет не соображу что откуда у вас вызывается, но по идее у вас что-то такое должно быть:

<modal :show="show" @close="show=false">
  <custom-input></custom-input>
</modal>
<button @click="show=true">

Или

<modal ref="myModal">
  <custom-input></custom-input>
</modal>
<button @click="$refs.myModal.open()">

[Николай Семенов]

Evgeny Kulakov: а open() это метод дефолтный?

[Evgeny Kulakov]

Николай Семенов: нет, просто пример того какой интерфейс может быть у модального окна.

[Николай Семенов]

Evgeny Kulakov: а ref я каждому модальному окну свой даю?

[Evgeny Kulakov]

ну да или если это внутри v-for происходит, то в итого получится массив ссылок.

[Николай Семенов]

Evgeny Kulakov: сделал вот так

div.sign-up__form-field
          label(class="sign-up__label" @click="ref.gender.open()") {{ gender }}
          app-modal(ref="gender")
            choose-gender(v-model="gender")

при клике пишет ошибку Uncaught TypeError: Cannot read property 'gender' of undefined

[Николай Семенов]

Evgeny Kulakov: второй вариант он более приемлемый как я понимаю для множественных модальных окон, но как его реализовать не пойму. метод open где и как реализовать не совсем понятно

[Evgeny Kulakov]

Николай Семенов: Можно вот с такого начать:

<template> // modal template
<div v-if="isActive">
<slot></slot>
</div>
</template>

<script>
export default {
data: {
isActive: false
},
methods: {
open() {
 this.isActive = true
},
close() {
 this.isActive = false
}
}
</script>

[Николай Семенов]

Evgeny Kulakov: Спасибо огромное. все получилось

Answer 2

[Alexander]

А как вы следите за состоянием инпута? Он у вас создаёт событие 'input', но в родителе вы нигде его не ловите (eventBus.$on('input', ...), либо я что-то упускаю с телефона.

Comments

[Николай Семенов]

v-model вроде как по дефолту следит за этим ивентом