Обновить состояние в родительском слоте из Vue

Question

Я новичок в Vue и в настоящее время застрял на проблеме. Я использую Vuetify в своем проекте, и у меня есть компонент v-dialog со слотом, подобным этому:

<template>
  <v-row>
    <v-dialog v-model="dialog" max-width="600px">
      <template v-slot:activator="{ on }">
        <v-btn class="ma-3" color="info" v-on="on">{{ text }}</v-btn>
      </template>
      <slot></slot>
    </v-dialog>
  </v-row>
</template>

В этом компоненте я передам форму как слот, и я хочу иметь возможность закрыть модальный, когда я отправляю форму. Исходя из фона React, я бы просто передал функцию, которая установила бы для диалоговой переменной значение false, когда я отправляю форму в слот. Я не могу понять, как это лучше всего сделать в Vue. Примеры, которые я нахожу, когда я гуглю, кажутся чрезмерными и слишком сложными для такой простой операции.

Спасибо

Answer 1

Если вы читаете больше о области слота здесь ,

Этот слот имеет доступ к тем же свойствам экземпляра (то есть к той же «области действия»), что и остальная часть шаблона. .

Поскольку вы передаете свой form через slot, у вас уже будет доступ к экземпляру parent компонента.

Также, как упоминалось в документации, полезно помнить

Все в родительском шаблоне компилируется в родительской области видимости; все в дочернем шаблоне скомпилировано в дочерней области.

Итак, когда вы пишете свой компонент,

<template>
  <ModalComponent>
    <form @submit="toggleModalVisibility"> 
      ...
    </form>
  </ModalComponent>
</template>

любой метод, переданный в form, будет иметь доступ к state родительского компонента.

Теперь, если вы можете просто установить свойство данных для переключения видимости модального компонента в родительском компоненте и метод для переключения этого свойства

data: () => {
  return {
    showModal: false //or true
  }
},
methods: {
  toggleModalVisibility() {
    this.showModal = !this.showModal;
  }
}

Вы можете просто назначить этот метод обработчику onSubmit вида

form @submit="toggleModalVisibility"

Answer 2

Если вы хотите, чтобы родитель закрыл диалоговое окно, тогда вы должны (вероятно) также сделать родитель ответственным за открытие диалогового окна. В противном случае вы можете столкнуться с компонентами, сражающимися друг с другом за контроль.

Это достаточно просто сделать. Попросите, чтобы родитель передал свойство вашему пользовательскому компоненту, который включает или отключает диалог. Поскольку родитель также предоставляет форму в виде слота, родитель может обрабатывать события из этой формы и правильно устанавливать свойство.