Vue. js - Компонент Emit from grandchild не выдавал событие $ emit родительскому элементу - PullRequest
Новая
       87

Vue. js - Компонент Emit from grandchild не выдавал событие $ emit родительскому элементу

1 голос
/ 24 апреля 2020

Я спланировал и сделал модальное, а затем создал кнопку, чтобы закрыть модальное окно. Я хотел изменить значение isHomeDialog, используя $emit в качестве события кнопки.
Однако событие $emit не было доставлено в "Home. vue"

Home . vue

<template>
  <div>
    <ReviewDialog
      :is-open="isHomeDialog"
      @close="closeEvent()/>
  </div>
</template>

<script>
import ReviewDialog from '@/components/popup/dialog/ReviewDialog';
</script>

export default {
  name: 'Home',
  components: {
    ReviewDialog
  },
  data () {
    return {
      isHomeDialog: true
    };
  },
  methods: {
    closeEvent () {
      console.log('close');
      isHomeDialog = false;
    }
  }
};

BaseDialog. vue

<template>
  <div v-show="isOpen">
    <div class="mask">&nbsp;</div>
    <div class="content">
      <button
        class="close"
        @click="$emit('close')">&nbsp;</button>

      <slot/>

    </div>
  </div>
</template>
<script>
export default {
  props: {
    isOpen: {
      type: Boolean,
      required: true
    }
  }
};

Reviewdialog. vue

<template>
  <BaseDialog
    url="@/components/popup/dialog/BaseDialog"
    id="review-dialog"
    :is-open="isOpen"
    :header-text="'REVIEW'">

    <div class="warp">
      <p>
        test
      </p>
    </div>
  </BaseDialog>
</template>

<script>
import BaseDialog from '@/components/popup/dialog/BaseDialog';

export default {
  components: {
    BaseDialog
  },
  props: {
    isOpen: {
      type: Boolean,
      default: false
    }
  }
</script>

Home
└ BaseDialog
└ ReviewDialog

В приведенной выше структуре я пытался отправить запрос в BaseDialog и ReviewDialog с помощью $ emit, но он не был доставлен в Home. Есть ли способ отправить $ emit его родительскому компоненту, кроме запроса с помощью $ root. $ Emit?

Ответы [ 2 ]

0 голосов
/ 24 апреля 2020

BaseDialog отправляет событие close в родительский объект, ReviewDialog, который его не прослушивает. Поэтому вам нужно прослушать ReviewDialog и переслать событие на Home: 

<BaseDialog
    url="@/components/popup/dialog/BaseDialog"
    id="review-dialog"
    :is-open="isOpen"
    :header-text="'REVIEW'"
    @close="$emit('close')"> <-- This line is new -->

Другой способ сделать это - ReviewDialog передать всех своих слушателей: 

<BaseDialog
    url="@/components/popup/dialog/BaseDialog"
    id="review-dialog"
    :is-open="isOpen"
    :header-text="'REVIEW'"
    v-on="$listeners"> <-- This line is new -->
0 голосов
/ 24 апреля 2020

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

Вероятно, другой подход custom component with v-model

Я поставил ссылку ниже: vuejs обновить родительские данные от дочернего компонента

...