Javascript 如何对同一vueJs组件使用多个引用？

我有一个php页面

person.php

，其中包括两个vueJs组件：

person details.vue

和

phones.vue

。每个组件都包括相同的第三个组件

notify delete

。此

notify delete

组件包括一个引导模式对话框，用于确认父组件（个人或电话）的删除操作。 我使用

props

在模式确认对话框中设置消息，并使用

$refs

显示消息

问题： 当设置此道具时，来自组件

person

的

msg

道具显示对话框，消息设置正确。但是，当我从

phones

组件进行设置时，对话框会显示

person

设置的消息。好像

person

不断覆盖

msg

道具的值

以下是代码示例：

person.php：

<person-details details="<?= json_encode($person) ?>"></person-details>
<phones details="<?= json_encode($phones) ?>"></phones>

<template>
    <notify-delete ref="modalDeletePerson" :entity="'person'" :msg="deleteMsg" @confirmed="deleteMe"></notify-delete>
    <button type="button" @click="confirmDelete">Delete this person</button>
</template>

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

<template>
    <notify-delete ref="modalDeletePhone" :entity="'phone'" :msg="deleteMsg" @confirmed="deleteMe($event)"></notify-delete>

    <button type="button" @click="confirmDelete">Delete this phone</button>
</template>

<script>
    export default {
        data () {
            return {
                deleteMsg: ''
            }
        },
        methods: {
            confirmDelete() {
                this.deleteMsg = 'Are you sure you want to delete this phone?'
                this.$refs.modalDeletePhone.show()
            },
            deleteMe() {
                // delete phone
            }
        }
    }
</script>

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    {{msg}}
                </div>
                <div class="modal-footer">
                    <button type="submit" data-dismiss="modal" @click="confirm">Delete</button>
                    <button type="button" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['entity', 'msg'],

        methods: {
            show() {
                $('#modalDelete').modal('show')
            },

            confirm() {
                this.$emit('confirmed')
            }
        }
    }
</script>

问题就在这里

show() {
    $('#modalDelete').modal('show')
}

您正在呈现具有相同id的两个模态，然后使用jQuery显示它们。具体来说，

$（“#modalDelete”）

将包含两个元素。我希望

modal

方法只选择第一个并显示它

试一试

---

这应该为

Notify delete.vue

组件的每个实例提供它自己的参考。

模板中的

Person details.vue

是否有键入错误，就像您在这里写的那样？是的，有额外的粘贴。非常感谢。我编辑过，很有魅力。谢谢！

<div ref="modal" class="modal fade" tabindex="-1" role="dialog">

show() {
    $(this.$refs.modal).modal('show')
}