Модель не определена при использовании defineModel в defineComponent

Все примеры использования defineModel приведены с <script setup>. Что, если я захочу использовать defineModel внутри defineComponent?

Кажется, это возможно, но я пытаюсь установить значение модели по умолчанию. Когда я пробую это, в родительском компоненте:

<Child v-model = "foo" /> (foo is "1")

в дочернем компоненте:

<script>
import { defineComponent, defineModel } from 'vue'
export default defineComponent({
 setup(props, ctx) {
 const model1 = defineModel()
 console.info(model1) // returns "undefined" here and when used in template

 console.info(ctx.attrs.modelValue) // returns "1"
 const model2 = defineModel({ type: String, default: ctx.attrs.modelValue })
 console.info(model2) // returns "undefined" here and when used in template

 return { model1, model2 }
 }
})
</script>

Я попробовал два подхода (model1 и model2), но оба не работают.

Почему model1 и model2 не получают значение по умолчанию из резервного атрибута modelValue (передаваемого от родительского элемента к дочернему с помощью v-model = "foo")? Я использую Vue v.3.4.23.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
130
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

defineModel — это макрос, его нельзя использовать в <script>, там он не используется и приведет к предупреждению:

defineModel() — это вспомогательная подсказка компилятора, которую можно использовать только внутри <script setup> одного файлового компонента. Его аргументы должны быть скомпилированы, и передача их во время выполнения не имеет никакого эффекта.

Чтобы v-model работало, компонент должен объявить modelValue prop, этого нельзя сделать, используя defineModel как обычную функцию в setup().

Как указано в документации :

Под капотом этот макрос объявляет свойство модели и соответствующее событие обновления значения. <...> вы также можете передать дополнительный объект, который может включать параметры свойства и параметры преобразования значения ссылки модели.

Другие вопросы по теме