子组件中的v-bind类停止父组件中的click事件

Question

在我的子组件中，应动态添加两个CSS类到 两个divs。

（父项上的）按钮不会触发click事件，没有任何触发...

但是当我删除孩子中的两个v-binds时，按钮将触发。

模态组件（子）

<template>
  <div>
    <div class="modal">
      <div class="modal-dialog fadeDown"
           role="dialog"
           aria-hidden="true"
           v-bind:class="{ 'in' : show }">
        <div class="modal-content">
          <slot></slot>
        </div>
      </div>
    </div>
    <div class="modal-backdrop fade"
         v-bind:class="{ 'in' : show }"
         aria-hidden="true"></div>
  </div>
</template>

<script lang="ts">
import {
  Component, Prop, Vue, Watch,
} from 'vue-property-decorator';

@Component
export default class PCModal extends Vue {
  @Prop()
  public value!: boolean;

  @Watch('value')
  // eslint-disable-next-line class-methods-use-this
  public onValueChanged(value: boolean): void {
    this.show = value;
  }

  public show: boolean = false;

  public open(): void {
    this.show = true;

    this.$emit('input', true);
  }

  public close(): void {
    this.show = false;

    this.$emit('input', false);
  }
}
</script>

<style scoped lang="scss">
@import "~@clr/ui/clr-ui.min.css";
</style>

主页组件（父级）

<template>
  <div>
    <button @click="open">Open modal</button>

    <p-c-modal v-model="show">
      <div class="modal-header">
        <div class="modal-header">
          <button aria-label="Close" class="close" type="button">
            X
          </button>
          <h3 class="modal-title">I have a nice title</h3>
        </div>
        <div class="modal-body">
          <p>But not much to say...</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" type="button">Cancel</button>
          <button class="btn btn-primary" type="button">Ok</button>
        </div>
      </div>
    </p-c-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import PCModal from '@/components/PCModal.vue';

@Component({
  components: {
    PCModal,
  },
})
export default class Home extends Vue {
  public show: boolean = false;

  public open(): void {
    this.show = true;

    console.info('this should appear'); // but it does not...
  }
}
</script>

<style scoped lang="scss">

</style>