如何正确地将 v 模型传递到 Quasar q 输入基础组件？

Question

我正在使用Quasar构建我的 Vue 应用程序，并且我想使用q-input.

我创建了一个名为VInput.vue我的基本组件的 SFC，它看起来像这样：

<template>
  <q-input
    outlined
    class="q-mb-md"
    hide-bottom-space
  />
</template>

然后我创建了一个 SFC，名称TestForm.vue如下：

<template>
  <q-form>
    <v-input label="Email" v-model="email" />
  </q-form>
</template>

<script setup lang="ts">
import VInput from './VInput.vue';
import { ref } from 'vue';
const email = ref('john@example.com');
</script>

这些label="Email" v-model="email"部分被传递到我的VInput.vue基础组件并在页面上正确呈现。

q-input但基础组件上存在打字稿错误，VInput.vue因为q-input需要 v 模型：

`Type '{ outlined: true; class: string; hideBottomSpace: true; "hide-bottom-space": boolean; }' is not assignable to type 'IntrinsicAttributes & VNodeProps & AllowedComponentProps & ComponentCustomProps & QInputProps'.`
`Property 'modelValue' is missing in type '{ outlined: true; class: string; hideBottomSpace: true; "hide-bottom-space": boolean; }' but required in type 'QInputProps'.ts(2322)`.

VInput.vue那么，在不知道 v-model 值的情况下，如何对基本组件进行编码呢？

我提出了以下解决方案，该解决方案似乎有效，因为我认为传递下来的 v 模型覆盖了基本组件 v 模型。

但我想问一下以确保我没有搞砸什么。

这是正确的做事方式吗？看起来很老套。

<template>
  <q-input v-model="inputText" outlined class="q-mb-md" hide-bottom-space />
</template>

<script setup lang="ts">
const inputText = '';
</script>

Answer 1

我找到了几个解决方案：

解决方案1

它涉及将 分成v-model单独的部分（:model-value和@update:model-value，然后将文本值作为 prop 传递。

基础组件VInput.vue：

    <template>
      <q-input
        outlined
        class="q-mb-md"
        hide-bottom-space
        :model-value="text"
        @update:model-value="(value) => emit('update:text', value)"
      />
    </template>
    
    <script setup lang="ts">
    defineProps({
      text: {
        required: false,
        type: String,
      },
    });
    const emit = defineEmits(['update:text']);
    </script>

解决方案2

提取道具并使用toRef它。

    <template>
      <q-input outlined class="q-mb-md" hide-bottom-space v-model="textProp" />
    </template>
    
    <script setup lang="ts">
    import { toRef } from 'vue';
    const props = defineProps({
      text: {
        required: false,
        type: String,
        default: '',
      },
    });
    const textProp = toRef(props, 'text');
    </script>