Using the same component in a child and parent in Vue-CodePudding

I have a VueJS project - which in one view there are parent and child components that are both using the same component called deleteModal.

When I trigger the modal from the child (to show it), it triggers both the child and parent modals (except no data is passed to the modal triggered by the parent). As I understand it, this is because I have used the component twice - in the parent and child - example below. To note, it works as expected from the paren

I've researched and tried a few things: setting a key value for each of the components, changing the components ref name among other things. I have also tried using v-show to only show component just before I trigger the parent model however, this solution is not ideal.

How can I only trigger the modal from the child?

Parent Component

<template>
  <div>
    <childCompt ref="childCompt" />
    <deleteModal
      ref="deleteModal"
      @deleteTriggerAPI="deleteAPIParent"
    />
</div>
<template>

Child Component - childCompt

 <template>
      <div>
        <deleteModal
          ref="deleteModal"
          @deleteTriggerAPI="deleteAPIChild"
        />
    </div>
    <template>

CodePudding user response：

You could try globally defining the component,

ie, in main.js

Vue.component('deleteModal',deleteModal)

CodePudding user response：

Try to use v-if which means show any code when conditional is true. That could work.