Vue.js-从子级槽位组件发出的事件不会使$ emit事件冒泡给父级事件

Question

我计划并制作了一个模态，然后创建了一个按钮以关闭模态窗口。我想使用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>

首页└BaseDialog└ReviewDialog

在上述结构中，我尝试使用$ emit将请求发送到BaseDialog和ReviewDialog，但未将其传递到Home。除了向$ root。$ emit请求以外，是否有其他方法可以将$ emit发送到其父组件。

我计划并制作了一个模态，然后创建了一个按钮以关闭模态窗口。我想使用$ emit作为按钮的事件来更改isHomeDialog的值。但是，$ emit的事件不是...

Answer 1

由于在Vue2中不推荐使用双向绑定，因此子代不能直接更改道具

Answer 2

BaseDialog向其父级close发出ReviewDialog事件，后者未在监听它。因此，您需要收听ReviewDialog，然后将事件重新发送到Home：