如何将引导程序对话框用作vueJs组件？

Question

我想显示和隐藏一个bootstrap模式对话框,其中这个对话框是一个vue组件,我可以使用props自定义它的常量(消息,按钮).

我用v-if='show'表现出来,但问题是,我不能设置show到false当模式是通过点击模式的背景下关闭.因此,对话框显示一次,但是当它关​​闭时,当我再次按下删除按钮时,它不再显示.

我有一个名为'person'的vue.js组件,它共同保存另一个组件'confirm-delete',如下所示:

Person.vue:

<template>
    <div>
        <confirm-delete v-if="show" :msg="deleteMsg"></confirm-delete>
        <!-- person details -->
        <button @click="confirmDelete">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: false,
            deleteMsg: ''
        }
    },
    methods: {
        confirmDelete () {
            this.show: true,
            this.deleteMsg: 'Are you sure you want to delete this person?'
        }
    }
}
</script>

ConfirmDelete.vue:

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="media-body">
                    <p>{{msg}}</p>
                </div>
            </div>
        </div>
    </div>
<template>

<script>
    export default {
        props: ['msg'],

        mounted: function(){
            $('#modalDelete').modal('show')
        }
    }
</script>

当然,如果我通过将对话框的代码包含在内来仅使用一个组件,则可行.但我的目标是将此对话框组件重用到我的应用程序的其他部分.

知道我怎么能这样做吗？

Answer 1

我会在模板中的组件标记中添加一个ref属性,然后给出一个方法,它只是触发引导方法.这样你就可以从父进程中的方法触发bootstrap方法.关于refs的更多信息.confirm-deletePerson.vueConfirmDelete.vueshowconfirmDeletethis.$refs.modal.show()

Person.vue:

<template>
    <div>
        <confirm-delete ref="modal" :msg="deleteMsg"></confirm-delete>
        <!-- person details -->
        <button @click="confirmDelete">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                show: false,
                deleteMsg: ''
            }
        },
        methods: {
            confirmDelete () {
                this.$refs.modal.show();
                this.deleteMsg: 'Are you sure you want to delete this person?'
            }
        }
    }
</script>

ConfirmDelete.vue:

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="media-body">
                    <p>{{msg}}</p>
                </div>
            </div>
        </div>
    </div>
<template>

<script>
    export default {
        props: ['msg'],
        methods: {
            show: function() {
                $('#modalDelete').modal('show')
            },
        }
    }
</script>