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

  • Z时代
  • 2024-02-17
  • 分类：IT

打个比方，有一个日期选择组件，然后表单中有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用不同的属性外，有没有其他啥方法？？？

回答：

<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的值与输入框名称匹配时，才会显示该日期选择组件。
通过这种方式，我们可以根据点击的输入框来显示相应的日期选择组件，而不是将两个日期选择组件都显示出来

以上是 vue3中，在一个模板下，共用同一个组件，如何区分？ 的全部内容， 来源链接： utcz.com/p/934993.html

回到顶部