VUE3 - 打开 Bootstrap 模式通过图像点击没有 JQuery 在多页/组件

Question

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

我创建了 3 个组件。

左DIV（图片）
右DIV（图片）
模态打开

现在，我想单击其中一张图片并打开模式。在 Singlepage 它有效。但是现在我正在使用组件。

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

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

Answer 1

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

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

Parent.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>

VUE3 - 打开 Bootstrap 模式通过图像点击没有 JQuery 在多页/组件

VUE3 - Open Bootstrap Modal By Image Click Without JQuery On MultiPage / Component

bootstrap-modal

vue.js

bootstrap-4

vuejs3