Как установить значение реквизита по умолчанию в Vue?
web-development javascript tutorial learn-to-code vue vuejs default-value-of-props props-in-vue

Как установить значение реквизита по умолчанию в Vue?

16 мая 2022 г.

Когда мы используем компоненты в Vue, мы часто используем свойства или реквизиты для передачи пользовательских фрагментов данных дочернему компоненту. Например, мы можем сообщить нашему дочернему компоненту, что для этой версии компонента «имя» установлено на «мой-компонент»:


```javascript


<Имя компонента="мой-компонент" />


Если мы попытаемся вызвать этот компонент без реквизита name, он вернет undefined в коде или просто текст без текста при отображении в HTML. Допустим, наш Component выглядит так:


```javascript


<скрипт>


экспорт по умолчанию {


реквизит: {


имя: Строка


установлен () {


console.log(это.имя);



<шаблон>



Привет {{имя}}




Все, что делает наш компонент, это определяет реквизит с именем name типа String, и консоль записывает это свойство в журнал. Он также отображает его в форме «Привет {{имя}}». Единственная проблема заключается в том, что если name не определено при вызове компонента, имя по умолчанию не дается.


Как установить значения реквизита по умолчанию в Vue с помощью API параметров?


Установить значения реквизита по умолчанию в Vue очень просто. Если вы используете API параметров, это так же просто, как расширение нашего свойства в объект. Например, если мы хотим, чтобы наше name имело значение по умолчанию «there», тогда мы обновляем нашу поддержку, чтобы она выглядела следующим образом:


```javascript


экспорт по умолчанию {


реквизит: {


название: {


тип: Строка,


по умолчанию: "там"


установлен () {


console.log(это.имя);


Теперь, если имя не указано, в сообщении будет просто написано «Привет».


Как установить значения реквизита по умолчанию в Composition API?


В API композиции для определения свойств используется функция defineProps. Эта функция следует тому же синтаксису, что и свойства, определенные в API параметров.


Определение реквизита без значения по умолчанию выглядит так:


```javascript


импортировать {defineProps} из 'vue';


константные реквизиты = defineProps({


имя: Строка


А затем, чтобы добавить значение по умолчанию, мы расширяем name, чтобы иметь свойство по умолчанию, как и раньше:


```javascript


импортировать {defineProps} из 'vue';


константные реквизиты = defineProps({


название: {


тип: Строка,


по умолчанию: "там"


Как установить реквизит в соответствии с требованиями в Vue?


Чтобы избежать необходимости устанавливать значение по умолчанию для свойства, мы можем сделать свойство обязательным, используя поле «required».


Например, если мы хотим, чтобы наше свойство name было определено, мы просто установили бы required в true:


```javascript


<настройка скрипта>


импортировать {defineProps} из 'vue';


константные реквизиты = defineProps({


название: {


тип: Строка,


требуется: правда



Также опубликовано [Здесь] (https://fjolt.com/article/vue-properties-setting-default-values)


Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE