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

我有一个PHP页面person.php，其中包括2个vueJs组件：person-details.vue和phones.vue。每个组件都包含相同的第三个组件notify-delete。此notify-delete组件包括引导模式对话框以确认父组件（人员或电话）的删除操作。我使用props在模式确认对话框中设置消息，并使用$refs进行显示。如何对同一个vueJs组件使用多个引用？

问题：当该道具从部件person设置msg道具和示出了对话框，该消息被正确地设置。但是，当我从phones组件中设置时，对话框显示由person设置的消息。仿佛person不断重申道具的价值msg。

这里是代码的示例：

person.php：

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

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

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

任何想法，我怎么能有两个区别同一组件的实例？

来源

2017-04-11 Warrio

您是否在模板中的Person-details.vue中有拼写错误，正如您在此处写的一样？ – Bert

是的，有一个额外的粘贴。谢谢。我编辑它。 – Warrio

的问题是在这里

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

要渲染2个情态动词使用相同的ID，然后使用jQuery向他们展示。具体而言，$('#modalDelete')将包含两个元素。我期望modal方法只是选择第一个并显示它。

尝试

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

和

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

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

来源

2017-04-11 18:28:00 Bert

工程就像一个魅力。非常感谢！ – Warrio

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

回答

相关问题