Все примеры использования 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.
defineModel
— это макрос, его нельзя использовать в <script>
, там он не используется и приведет к предупреждению:
defineModel() — это вспомогательная подсказка компилятора, которую можно использовать только внутри
<script setup>
одного файлового компонента. Его аргументы должны быть скомпилированы, и передача их во время выполнения не имеет никакого эффекта.
Чтобы v-model
работало, компонент должен объявить modelValue
prop, этого нельзя сделать, используя defineModel
как обычную функцию в setup()
.
Как указано в документации :
Под капотом этот макрос объявляет свойство модели и соответствующее событие обновления значения. <...> вы также можете передать дополнительный объект, который может включать параметры свойства и параметры преобразования значения ссылки модели.