Ссылка на слот для определения родительской функции - PullRequest
Новая
       4

Ссылка на слот для определения родительской функции

0 голосов
/ 14 сентября 2018

У меня есть 2 компонента:

Модальный компонент

  • Этот компонент просто отображает его slot content.
  • В этом модальном режиме у меня есть два метода submitи cancel.

Компонент ContractForm

  • Это простой компонент, отображающий форму.

Что я хочу?

Итак, я хочу на самом деле определить submit method, что он делает, в ContractForm component (дочернем), но использовать его в Modal component (родительском)?

Мой код

Я попытался изменить ContractForm component и вызвать метод, определенный в ContractForm, из Modal component следующим образом.

html 

  <modal>
    <contract-form ref="modalcontent"></contract-form>
  </modal>

Модальный компонент

<template>
  <div class="modal">
    <slot :submit-modal="submitModal" ref="modalContent"></slot>
    <button @click="submitModal">Submit</button>
  </div>
</template>

<script>
export default {
  methods:{
    submitModal: function () {
      this.$refs.modalcontent.submitModal()
  },
}
</script>

Компонент ContractForm 

<template>
  <div>
    <p>Modal content</p>
  </div>
</template>

<script>
export default {
  methods:{
    submitModal: function () {
      alert('test')
    },
  }
}
</script>

Проблема

Ссылка не работает, когда I console.log(this.$refs) возвращает пустой объект.Я думаю, что refs не работает, потому что это slot (innerHtml)

Кто-то может мне помочь, пожалуйста?Спасибо

1 Ответ

0 голосов
/ 14 сентября 2018

Вы правы, полагая, что на тег slot нельзя ссылаться с помощью тега ref.

В вашем случае было бы лучше, чтобы модальный компонент генерировал событие submit при нажатии кнопки «Отправить»: 

<template>
  <div class="modal">
    <slot></slot>
    <button @click="$emit('submit')">Submit</button>
  </div>
</template>

И затем в области родительского компонента вы можете указать, что функция submitModal компонента формы является обработчиком для модального события submit. 

<modal @submit="$refs.modalcontent.submitModal()">
  <contract-form ref="modalcontent"></contract-form>
</modal>
...