如何监听来自 bootstrap-vue modal 的事件？

Question

我的页面中有两个模态，我需要一种方法来在第一个模态上按下确定按钮时监听 'ok' 事件，并通过打开另一个模态进行响应。文档中没有示例： https://bootstrap-vue.js.org/docs/components/modal/

我想使用这个监听器，但没有任何解释，我也不知道这里是什么。

export default {
  mounted() {
    this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
    })
  }
}

这是我代码的相关部分：

<div>
    <b-modal id="modal-center-add-post" style="width: 120px" centered  class="h-50 d-inline-block min-vw-100" ok-title="next" >
        <add-post></add-post>
    </b-modal>
</div>
<div>
    <b-modal id="modal-center-add-content" style="width: 120px" 
        centered  class="h-50 d-inline-block min-vw-100" 
        ok-only ok-title="Create" >
        <add-content></add-content>
    </b-modal>
</div>

和添加-post组件代码是

<template>
    <form>
        <div class="form-group row">
            <label for="title" 
                   class="col-sm-2 col-form-label">
                   Title
            </label>
            <div class="col-sm-10">
                <input type="text" 
                       class="form-control" 
                       id="title" 
                       placeholder="Title">
            </div>
        </div>
        <div class="form-group row">
            <label for="chooseTopic" 
                   class="col-sm-2 col-form-label">
                   Topic
            </label>
            <div class="col-sm-10">
                <select id="chooseTopic" class="form-control">
                    <option selected>Leadership</option>
                    <option>HR</option>
                    <option>Sales</option>
                    <option>Marketing</option>
                </select>
            </div>
        </div>
        <fieldset class="form-group">
            <div class="row">
                <legend class="col-form-label col-sm-2 pt-0"> Type</legend>
                <div class="col-sm-10">
                    <div class="form-check-inline ">
                        <label class="form-check-label" 
                               for="video" 
                               :class="{'checked':(isChecked==='video')}" 
                               @click="isChecked='video'">
                               <input class="form-check-input" 
                                      type="radio" name="video" 
                                      id="video" 
                                      v-model="postingType" 
                                      value="video" checked>
                            <i class="fab fa-youtube "></i>
                            Video
                        </label>
                    </div>
                    <div class="form-check-inline">
                        <label class="form-check-label" 
                               for="ebook" 
                               :class="{'checked':(isChecked==='ebook')}" 
                               @click="isChecked='ebook'">
                               <input class="form-check-input" 
                                      type="radio" 
                                      name="ebook" 
                                      id="ebook" 
                                      v-model="postingType" 
                                      value="ebook">
                              <i class="far fa-file-pdf "></i>
                              Ebook
                        </label>
                    </div>
                    <div class="form-check-inline ">
                        <label class="form-check-label " 
                               for="article" 
                               :class="{'checked':(isChecked==='article')}" 
                               @click="isChecked='article'">
                            <input class="form-check-input " type="radio"  
                                   name="article" id="article"              
                                   v-model="postingType"  value="article" >
                            <i class="fas fa-pen-square "></i>
                            Article
                        </label>
                    </div>
                </div>
            </div>
        </fieldset>

    </form>
</template>

<script>
    export default {
        name: "AddPost",
        data(){
            return{
                postingType:'',
                isChecked:'video'
            }
        },
    }
</script>

因此，当我在 add-post 组件中单击确定（下一步）时，我希望弹出第二个模式。

Answer 1

它就在 Events

下文档的底部

基本使用

@ok="yourOkFn"

如何监听来自 bootstrap-vue modal 的事件？

How to listen to events from bootstrap-vue modal?

vue.js

bootstrap-vue