向关闭X按钮添加ID”

<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close">
   <span aria-hidden="true">&times;</span>
</button>

然后创建一个方法来关闭模态：

closeModal() {
   document.getElementById('close').click();
},

像@Dan Stoian回复一样，您可以在vue.js中使用ref：

<button ref="Close" type="button" data-dismiss="modal" ...>
   ...
</button>

在你的联络人身上

this.$refs.Close.click();

如果您正在使用Bootstrap，您需要从它调用Hide和Show方法，因为Modal API会动态创建HTML元素（作为深色背景）
我建议创建一个保存方法而不是调用$emit，在$emit中，您可以在发出save信号之前调用模态hide方法。

<script>
import $ from 'jquery'

export default {
  name: "CreateTodo",
  props: ["mode", "title", "todo"],
  ref: "createTodoModal",
  mounted() {
    if (this.mode == "create") {
      this.title = "Create Todo";
    }
  },
  methods: {
    save() {
       $('#ModalId').modal('hide')
       this.$emit('save')
    }
  }
};
</script>

在这种情况下不需要showModal。

您可以使用v-if来显示/隐藏模态
在您的组件中：

<div v-if="showModal">
    <div id="todoModal" class="modal fade" role="dialog">
    ...
    </div>
  </div>

并将showModal设置为真/假以分别显示/隐藏组件。

• • 儿童**

<template>
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby=""
    aria-hidden="true" ref="modalEle">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="exampleModalLabel">{{ title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <slot name="body" />
        </div>
        <div class="modal-footer">
          <slot name="footer"></slot>
          <button ref="Close" type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, defineProps, defineExpose } from "vue";
import { Modal } from "bootstrap";

defineProps({
  title: {
    type: String,
    default: "<<Title goes here>>",
  },
});

let modalEle = ref(null);
let thisModalObj = null;

onMounted(() => {
  thisModalObj = new Modal(modalEle.value);
});

function _show() {
  thisModalObj.show();
}

function _close(){
  thisModalObj.hide()
}

defineExpose({ show: _show, close: _close });
</script>

• • 家长**

<template>
  <Modal title="OMG ITS A MODAL" ref="thisModal">
    <template #body>
      <div class="col-md-12 mx-auto">
        yay modal text
      </div>
    </template>
    <template #footer>
      <!-- extra footer stuff !-->
    </template>
  </Modal>
</template>

<script setup>
import { ref } from 'vue';
import Modal from "../components/ModalCard.vue";

let showModal = ()=>{
  thisModal.value.show();
}

let closeModal = ()=>{
  thisModal.value.close();
}

</script>

• • 说明**

因此，基本上我们所做的是通过引用将子函数暴露给父函数。在_show和_close函数中，我们触发了. show（）和. hide（），它们是引导模式函数，我们也可以通过thisModalObj访问它们。我希望这能有所帮助!
现在你可以通过编程调用www.example.com和thisModal.value.close，它会显示并关闭模态函数。thisModal.value.show and thisModal.value.close and itll show and close the modal.

你可以使用这个npm软件包

npm i vue-js-modal

https://www.npmjs.com/package/vue-js-modal
然后应按以下方式修改代码：

<template>
<modal :name="'edit-modal'+id" height="auto">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit {{ mName }}</h5>
        <button type="button" class="close" @click="hideEditModal(id)">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <form action="/user/update" method="patch" @submit.prevent="updateAssistant">
        <div class="modal-body">
            <div class="position-relative form-group">
                <label for="exampleAddress" class="">Full name</label><input name="name" v-model="editName" id="exampleAddress" placeholder="FullName" type="text" class="form-control">
                <div v-if="errors.has('editName')" class="alert alert-danger">
                    {{ errors.first('editName') }}
                </div>
            </div>

            <div class="position-relative form-group">
                <label for="exampleEmail11" class="">Email</label><input name="email" v-model="editEmail" id="exampleEmail11" placeholder="email" type="email" class="form-control">
                <div v-if="errors.has('editEmail')" class="alert alert-danger">
                    {{ errors.first('editEmail') }}
                </div>
            </div>

            <div class="position-relative form-group">
                <label for="examplePassword11" class="">Change Password</label><input name="password" v-model="editPassword" id="examplePassword11" placeholder="password" type="password" class="form-control">
                <div v-if="errors.has('password')" class="alert alert-danger">
                    {{ errors.first('password') }}
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="hideEditModal(id)">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
        <span class="loader" v-if="this.loading" style="position: absolute; bottom: 0.515rem; left: 20px;">
            <span class="ball-clip-rotate">
                <div style=" border:1px solid #000;"></div>
            </span>
        </span>
    </form>
</modal>

import Errors from '../../Errors.js'
export default {

name: 'AssistantEditModalComponent',

props: [
    'mEmail',
    'mName',
    'id'
],

data () {
    return {
        editPassword: null,
        disabled: false,
        errors: Errors,
        loading: false
    }
},

methods: {
    hideEditModal(id) {
        this.$modal.hide('edit-modal'+id);
    },

    setData() {
        this.editName = this.mName
        this.editEmail = this.mEmail
    },

    updateAssistant() {
        this.disabled = true;
        this.loading = true;
        const form = {
            editName: this.mName,
            editEmail: this.mEmail,
            password: this.editPassword
        }
        axios.patch('/user/update/'+this.id, form)
        .then((response) => {
            this.disabled = false
            this.loading = false
            this.hideEditModal(this.id)
            this.alert(response)
        })
        .catch((err) => {
            this.disabled = false
            this.loading = false
            Errors.fill(err.response.data.errors)
        })
    },

    alert(response) {
        swal(response.data.username, response.data.message, 'success')
    },
},

computed: {
    editName: {
        get: function() {
            return this.mName
        },
        set: function(value) {
            this.$emit('update:mName', value);
        }
    },
    editEmail: {
        get: function() {
            return this.mEmail
        },
        set: function(value) {
            this.$emit('update:mEmail', value);
        }
    }
}}

如果你不想添加任何额外的关闭按钮，而不是默认的X按钮的模态标题，你可以这样做：

<b-modal
    id="user-role"
    ref="role-modal"
    hide-footer
  >
...
</b-modal>

那么在你的方法中

hideModal() {
    this.$refs["role-modal"].$refs['close-button'].click()
}

对于Vuejs 3，这段代码工作完美：

<template>
<div class="modal fade" id="theModal">
...
</div>
</template>

<script>
import { Modal } from 'bootstrap'

export default {
  data: {
    return {
      theModal: null,
    }
  }
  mounted() {
    this.theModal = new Modal('#theModal');
  },
  methods: {
    hideModal() {
      this.theModal.hide();
    }
  }
}
</script>