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

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

<Component name="my-component" />

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

<script>
export default {
    props: {
        name: String
    },
    mounted() {
        console.log(this.name);
    }
}
</script>
<template>
    <p>
        Hi {{ name }}
    </p>
</template>

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

Установка значений реквизита по умолчанию в Vue

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

export default {
    props: {
        name: {
            type: String,
            default: "there"
        }
    },
    mounted() {
        console.log(this.name);
    }
}

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

Установка значений реквизита по умолчанию в Composition API

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

import { defineProps } from 'vue';
const props = defineProps({
    name: String
});

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

import { defineProps } from 'vue';
const props = defineProps({
    name: {
        type: String,
        default: "there"
    }
});

Настройка реквизита в соответствии с требованиями Vue

Чтобы избежать необходимости устанавливать значение по умолчанию для свойства, мы можем сделать свойство обязательным, используя поле required. Например, если мы хотим, чтобы наше свойство name было определено, мы просто установили бы required в true:

<setup>
import { defineProps } from 'vue';
const props = defineProps({
    name: {
        type: String,
        required: true
    }
});
</script>

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.