如何使用引导对话框作为 vueJs 组件？

Question

我想显示和隐藏一个引导模式对话框，其中该对话框是一个 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

我会在Person.vue 模板中的confirm-delete 组件标记中添加一个ref 属性，然后给ConfirmDelete.vue 一个show 方法，它只是触发引导方法。这样，您可以通过this.$refs.modal.show() 从父级中的confirmDelete 方法触发引导方法。 More info on refs.

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>

确认删除.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>