Question

我想显示并隐藏一个bootstrap模式对话框，其中这个对话框是一个vue组件，我可以使用props自定义它的常量（消息，按钮）。

我使用v-if='show'来显示它，但问题是，当通过单击模态背景关闭模态时，我无法将show设置为false。结果，对话框显示一次，但是当它关闭时，当我再次按下删除按钮时，它不再显示。

我有一个名为＆＃39; person＆＃39;的vue.js组件。共同保留另一个组件＆＃39;确认 - 删除＆＃39;如下：

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模板中的confirm-delete组件标记中添加Person.vue属性，然后为ConfirmDelete.vue提供show方法，只需触发引导方法。这样，您可以通过confirmDelete从父级this.$refs.modal.show()方法触发引导方法。 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>

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>

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

1 个答案: