Javascript 创建我自己的组件vuejs，包含两个不同的部分

我有一个带有输入的组件，当单击该组件时会打开一个模式。 当我使用这个组件，并将它插入到一个具有相对位置的div中时，打开的模式，它不会很好地显示。我需要模态的html在div相对位置之外

重要的是，我的组件同时包含输入和模态，因为这个组件本身将在另一个组件中使用多次

<div class="position-relative">
    <MyOwnComponet />
</div>
<div class="position-relative">
    <MyOwnComponet />
</div>

我的组件大致如下所示：

<template>
    <input @click="showModal = true" />
    <div class="modal" v-if="showModal">
       ...
    </div>
</template>

...

我不确定您对此类需求的观点，但无论如何，您可以通过道具解决问题

你可以在“MyOwnComponet”中使用这样的道具。并使用该属性值进行相应渲染

您的主要组件

<div class="position-relative">
    <MyOwnComponet :isInput="true" />
</div>
<div class="position-relative">
    <MyOwnComponet :isInput="false" />
</div>

您的（组件）

第一组
第2组
导出默认值{
道具：{
isInput:Boolean，
},
数据（）{
}
};

---

您可以用输入替换div-1，用modal替换div-2。

这可能是一个解决方案，我会试试，谢谢@Juhil

<template>
 <div v-if="isInput">div-1</div> 
 <div v-else>div-2</div> 
</template>
<script>


export default {
  props: {
    isInput : Boolean,
  },
  data() {
  }
};
</script>