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


139

1. Как я могу установить значение по умолчанию для пропеллера компонента в Vue 2? Например, есть простой moviesкомпонент, который можно использовать следующим образом:

<movies year="2016"><movies>



Vue.component('movies', {
    props: ['year'],

    template: '#movies-template',
    ...
}

Но, если пользователь не указывает year:

<movies></movies>

тогда компонент примет некоторое значение по умолчанию для yearреквизита.

2. Кроме того, как лучше всего проверить, не установил ли пользователь опору? Это хороший способ:

if (this.year != null) {
    // do something
}

или, может быть, это:

if (!this.year) {
    // do something
}

?

Ответы:


231

Vueпозволяет вам указать propзначение по умолчанию и typeнапрямую, сделав реквизит объектом (см .: https://vuejs.org/guide/components.html#Prop-Validation ):

props: {
  year: {
    default: 2016,
    type: Number
  }
}

Если передан неправильный тип, он выдает ошибку и регистрирует ее в консоли, вот скрипка:

https://jsfiddle.net/cexbqe2q/


2
А как насчет второго вопроса (это больше вопрос JavaScript): как лучше всего проверить, не установил ли пользователь опору? Это хороший способ: if (this.year != null) или, может быть, это: if (!this.year)или? Спасибо!
PeraMika

1
Если вы установите значение по умолчанию, то проп будет всегда установлен, если вы не установите значение по умолчанию null. Если это то, что вам нужно выполнить какую-то другую логику if (this.year != null)или if (!this.year)это путь.
craig_h

36

Это старый вопрос, но относительно второй части вопроса - как вы можете проверить, установил ли пользователь / не установил опору?

Осматривая thisвнутри компонента, мы имеем this.$options.propsData. Если здесь присутствует опора, пользователь явно ее установил; значения по умолчанию не отображаются.

Это полезно в тех случаях, когда вы не можете реально сравнить свое значение с его значением по умолчанию, например, если проп - это функция.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.