Vue.js：如何通过组件内showModal方法触发其他组件中的Modal

我来给你梳理两种可行的方案，从快速解决到Vue推荐的组件化方式都有：

方法一：直接调用Bootstrap Modal的API（快速实现） #

你用到的是Bootstrap的Modal组件，它本身提供了JavaScript API来控制显示和隐藏。只要项目里已经引入了jQuery和Bootstrap的JS文件（Bootstrap Modal依赖jQuery），直接在showModal方法里调用API就行：

修改info.vue的代码：

<template>
  <div class="container">
    <button class="btn btn-info" @click="showModal">show modal</button>
    <example-modal></example-modal>
  </div>
</template>
<script>
import exampleModal from './exampleModal.vue'
export default {
  methods: {
    showModal () {
      // 调用Bootstrap的Modal显示方法
      $('#exampleModal').modal('show')
    }
  },
  components:{
    "example-modal":exampleModal
  }
}
</script>

这种方式简单直接，但属于直接操作DOM，不太符合Vue的响应式设计思路，适合快速解决小场景的需求。

方法二：Vue响应式父子组件传值（推荐方案） #

这种方式更贴合Vue的组件化理念，通过父子组件的状态传递来控制Modal，避免直接操作DOM，代码也更易维护：

第一步：改造子组件exampleModal.vue #

添加一个visible属性来接收父组件的状态，监听这个属性的变化来调用Modal的API，同时还要处理Modal关闭后的状态同步（比如用户点击关闭按钮时，把状态同步回父组件）：

<template>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">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">
          hihi
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    // 监听visible属性变化，控制Modal显示/隐藏
    visible(newVal) {
      if (newVal) {
        $('#exampleModal').modal('show')
      } else {
        $('#exampleModal').modal('hide')
      }
    }
  },
  mounted() {
    // 监听Modal关闭事件，把状态同步回父组件
    $('#exampleModal').on('hidden.bs.modal', () => {
      this.$emit('update:visible', false)
    })
  }
}
</script>

第二步：修改父组件info.vue #

添加一个响应式状态modalVisible，通过.sync修饰符实现父子组件的状态双向绑定，在showModal方法里修改这个状态即可触发Modal：

<template>
  <div class="container">
    <button class="btn btn-info" @click="showModal">show modal</button>
    <!-- 使用.sync修饰符实现状态双向同步 -->
    <example-modal :visible.sync="modalVisible"></example-modal>
  </div>
</template>
<script>
import exampleModal from './exampleModal.vue'
export default {
  data() {
    return {
      modalVisible: false
    }
  },
  methods: {
    showModal () {
      this.modalVisible = true
    }
  },
  components:{
    "example-modal":exampleModal
  }
}
</script>

这样整个流程就完全由Vue的响应式系统管理，组件之间的通信清晰，后续维护也更方便。如果不想依赖jQuery，也可以考虑使用Bootstrap的原生JS方式，或者直接使用Vue专属的Bootstrap组件库（比如bootstrap-vue），不过针对你当前的代码结构，上面两种方案已经完全够用了。

内容的提问来源于stack exchange，提问作者user3717119