VUE3 - 在多页/组件上通过图像单击打开引导模式而不使用 JQuery

Question

我尝试使用 VUE3 和 Bootstrap 通过单击这两个图像之一打开模态框。

我创建了 3 个组件。

1. 左 DIV（图片）
2. 右 DIV（图片）
3. 打开模式

现在，我想单击其中一张图像并打开模式。 在 Singlepage 它可以工作。但现在我正在使用组件。

如何在“ModalContact”组件中监听其他组件中的点击事件？

我把完整的包上传到了github：https://github.com/Gismo1337/wtf-i-am-doing-here

Answer 1

使用 Vue 2 和 Vue CLI，我创建了几个单文件组件来演示如何在没有 jQuery 的情况下打开和关闭 Bootstrap 4 模态，将模态包装在它自己的组件中。

虽然这不是使用 Vue 3，但你应该可以移植它。

父.vue

<template>
  <div class="parent">
    <h4>Bootstrap Modal Parent</h4>
    <div class="row">
      <div class="col-md-6">
        <button class="btn btn-secondary" @click="showModal">Open Bootstrap Modal</button>
      </div>
    </div>
    <bootstrap-modal-no-jquery v-if="displayModal" @close-modal-event="hideModal" />
  </div>
</template>

<script>
  import BootstrapModalNoJquery from './BootstrapModalNoJquery.vue'

  export default {
    components: {
      BootstrapModalNoJquery
    },
    data() {
      return {
        displayModal: false
      }
    },
    methods: {
      showModal() {
        this.displayModal = true;
      },
      hideModal() {
        this.displayModal = false;
      }
    }

  }
</script>

BootstrapModalNoJquery.vue

<template>
  <div class="bootstrap-modal-no-jquery">
    <div class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" @click="saveChanges">Save changes</button>
            <button type="button" class="btn btn-secondary" @click="closeModal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      closeModal() {
        this.$emit('close-modal-event');
      },
      saveChanges() {
        this.closeModal();
      }
    }
  }
</script>

<style scoped>
  /* Override default value of 'none' */
  .modal {
    display: block;
  }
</style>