Valores padrão para acessórios do componente Vue e como verificar se um usuário não configurou o suporte?

139

1. Como posso definir o valor padrão para um suporte de componente no Vue 2? Por exemplo, há um moviescomponente simples que pode ser usado desta maneira:

<movies year="2016"><movies>



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

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

Mas, se um usuário não especificar year:

<movies></movies>

então o componente terá algum valor padrão para o yearsuporte.

2. Além disso, qual é a melhor maneira de verificar se um usuário não configurou o suporte? Esta é uma boa maneira:

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

ou talvez isso:

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

?

javascript vue.js vue-component PeraMika
fonte

Respostas:

231

Vuepermite que você especifique um propvalor padrão e typediretamente, tornando props um objeto (consulte: https://vuejs.org/guide/components.html#Prop-Validation ):

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

Se o tipo errado for passado, ele gera um erro e o registra no console, eis o problema:

https://jsfiddle.net/cexbqe2q/

craig_h
fonte
2
E a segunda pergunta (essa é mais uma pergunta sobre JavaScript): qual é a melhor maneira de verificar se um usuário não definiu o suporte? É este um bom caminho: if (this.year != null) ou talvez este: if (!this.year)ou? Obrigado!
PeraMika #
1
Se você definir um valor padrão, o prop será sempre definido, a menos que você defina o padrão como null. Se é isso que você precisa para executar alguma outra lógica if (this.year != null)ou if (!this.year)é o caminho a percorrer.
Craig_h 01/11/19
36

Essa é uma pergunta antiga, mas com relação à segunda parte da pergunta - como você pode verificar se o usuário definiu / não definiu uma proposta?

Inspecionando thisdentro do componente, nós temos this.$options.propsData. Se o suporte estiver presente aqui, o usuário o configurou explicitamente; valores padrão não são mostrados.

Isso é útil nos casos em que você realmente não pode comparar seu valor ao seu padrão, por exemplo, se o suporte é uma função.

aurumpotestasest
fonte