Почему Vue не переопределяет значение props-а?

Question

[EranosyanEduard]

Vue 3 @latest:

Скажите, пжл, почему Vue компонент Test получает props dark, равный false, а не true?
Playground https://play.vuejs.org/#eNqVVM1u2zAMfhXOGOAWSG0M28...

Answer 1

[Антон Антон]

При отсутствии у TestBox пропса, передаваемого в него, оно проваливается далее в корневой элемент шаблона.

Наверное все "внешние" атрибуты/свойства добавляются в конце и сейчас - как будто бы там <Test :dark="true" :dark="false"/>. Немного нелогично, похоже на неопределенное или незадокументированное поведение для случая с совпадением имен.

Чтобы "определить" это поведение - надо просто добавить определение этого свойства в TestBox:

defineProps({
    dark:Boolean
})

тогда конкретно dark проваливаться перестанет.

Либо нужно выключить дефолтное наследование атрибутов и тогда указание v-bind перед :dark <Test v-bind="$attrs" :dark="true"/> заработает:

defineOptions({
    inheritAttrs:false
})

при указании после: <Test :dark="true" v-bind="$attrs"/>- поведение останется текущим

И еще надо завести issue в https://github.com/vuejs/core потому что это поведение кажется ошибочным. Может быть они его исправят или зафиксируют в документации, что приоритет при включенном наследовании у "внешнего" значения.

Comments

[EranosyanEduard]

Спасибо. Я создал Issue