Question

所以我试图关闭一个模态我的标记看起来像是

<modal v-show="isVisible"></modal>
<button @click="isVisible=true" @close="isVisible=false">Show Modal</button>

我的组件就像这样

Vue.component('modal',{

    template:`<div id="exampleModalPopovers" role="dialog" aria-labelledby="exampleModalPopoversLabel" style="display: block; padding-right: 15px;">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <h5>Popover in a modal</h5>
                        <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="" data-content="Popover body content is set in this attribute." data-original-title="Popover title">button</a> triggers a popover on click.</p>
                        <hr>
                        <h5>Tooltips in a modal</h5>
                        <p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> have tooltips on hover.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>`
})

new Vue({

    el: '#root',
    data:{
           isVisible:false
         }
})

所以Modal打开很好但是当我尝试点击模态的关闭按钮时它不起作用我也没有发现任何错误

Answer 1

你应该把@close放在模态上：

<modal v-show="isVisible" @close="isVisible=false"></modal>

因为事件是从模态而不是按钮发出的。

Answer 2

如果您指的是this，那么您必须像这样修改它：

<modal @close="isVisible=false" v-show="isVisible"></modal>
<button @click="isVisible=true">Show Modal</button>

你在这里发出了关闭事件，在模态组件中：

<button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">Close</button>

所以它将在modal收到该事件。

尝试发出自定义类Vuejs时$ emit无效

2 个答案: