前端 - vue3中，在一个模板下，共用同一个组件，如何区分？

Question

打个比方，有一个日期选择组件，然后表单中有2个输入框

<template><form>    <div>        <input name="start" @click="showCalenda">        <Calenda v-if="isShow" />    </div>    <div>        <input name="end" @click="showCalenda">        <Calenda v-if="isShow" />    </div></form></template><script setup>import { ref } from 'vue';import Calenda from './Calenda.vue';let isShow = ref(false)function showCalenda(){    isShow  = true}</script>

点击其中一个输入框，显示相对应日期选择组件，我该怎么写？？？？除了将v-if用不同的属性外，有没有其他啥方法？？？

Answer 1

<template>  <form>    <div>      <input name="start" @click="showCalendar('start')" />      <Calenda v-if="activeInput === 'start'" />    </div>    <div>      <input name="end" @click="showCalendar('end')" />      <Calenda v-if="activeInput === 'end'" />    </div>  </form></template><script setup>import { ref } from 'vue';import Calenda from './Calenda.vue';const activeInput = ref('');function showCalendar(inputName) {  activeInput.value = inputName;}</script>

**可以使用一个变量来记录当前点击的是哪个输入框，然后根据这个变量来决定哪个日期选择组件显示

**添加了一个名为activeInput的响应式变量，用于记录当前点击的输入框名称。当点击某个输入框时，调用showCalendar()方法，并将对应的输入框名称作为参数传递进去。showCalendar()方法会更新activeInput的值为相应的输入框名称。

**然后，我们使用v-if指令来判断activeInput的值，决定是否显示对应的日期选择组件。只有当activeInput的值与输入框名称匹配时，才会显示该日期选择组件。
通过这种方式，我们可以根据点击的输入框来显示相应的日期选择组件，而不是将两个日期选择组件都显示出来

Answer 2

在你的例子中，你遇到的问题是两个输入框都共用了同一个组件 Calenda，并且都使用了相同的 isShow 引用。这样会导致无论你点击哪个输入框，都会显示同样的日期选择组件。

要解决这个问题，你需要为每个输入框分别维护一个独立的 isShow 引用。你可以通过使用 ref 来创建这些引用。以下是一种可能的解决方案：

<template><form>    <div>        <input name="start" @click="showCalenda(start)">        <Calenda v-if="startIsShow" />    </div>    <div>        <input name="end" @click="showCalenda(end)">        <Calenda v-if="endIsShow" />    </div></form></template><script setup>import { ref } from 'vue';import Calenda from './Calenda.vue';let startIsShow = ref(false);let endIsShow = ref(false);function showCalenda(isShowRef){    isShowRef.value = true;}</script>

在这个例子中，我为每个输入框创建了一个独立的 isShow 引用：startIsShow 和 endIsShow。当你点击输入框时，showCalenda 函数接受相应的引用作为参数，并将其值设置为 true。这样，每个输入框就可以独立地控制与其关联的日期选择组件的显示了。