如何使用对同一个 vueJs 组件的多个引用？答案

【问题标题】：How to use multiple references to the same vueJs component?如何使用对同一个 vueJs 组件的多个引用？
【发布时间】：2017-04-11 18:11:04
【问题描述】：

我有一个 php 页面 person.php，其中包括 2 个 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>

Person-details.vue：

<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>

Phones.vue：

<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>

Notify-delete.vue：

<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>

知道如何让同一个组件有两个不同的实例吗？

【问题讨论】：

您在模板中的Person-details.vue 是否有错字，就像您在这里写的那样？
是的，有一个额外的粘贴。谢谢你。我编辑了它。

标签： javascript vue.js

【解决方案1】：

问题来了

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

您正在渲染两个具有相同 id 的模式，然后使用 jQuery 来显示它们。具体来说，$('#modalDelete') 将包含两个元素。我希望modal 方法只选择第一个并显示它。

试试

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

和

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

这应该为Notify-delete.vue 组件的每个实例提供它自己的引用。

【讨论】：

像魅力一样工作。非常感谢！