¿Valores predeterminados para las props del componente Vue y cómo comprobar si un usuario no estableció la prop?

1. ¿Cómo puedo establecer el valor predeterminado para una propiedad de componente en Vue 2? Por ejemplo, hay un componente simple movies que se puede usar de esta manera:

<movies year="2016"><movies>



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

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

Pero, si un usuario no especifica el year:

<movies></movies>

Entonces el componente tomará algún valor por defecto para la prop year.

2. Además, ¿cuál es la mejor manera de comprobar si un usuario no configuró el prop? Es esta una buena manera:

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

O tal vez esto: 

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

?

Author: PeraMika, 2016-11-01
Source

2 answers

Vue permite especificar un valor predeterminado prop y type directamente, haciendo props un objeto (ver: https://vuejs.org/guide/components.html#Prop-Validation):

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

Si se pasa el tipo incorrecto, entonces lanza un error y lo registra en la consola, aquí está el violín:

Https://jsfiddle.net/cexbqe2q/

 119
Author: craig_h,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-01 18:17:58

Esta es una pregunta antigua, pero con respecto a la segunda parte de la pregunta, ¿cómo puede verificar si el usuario estableció/no estableció un prop?

Inspeccionando this dentro del componente, tenemos this.$options.propsData. Si el prop está presente aquí, el usuario lo ha establecido explícitamente; no se muestran los valores predeterminados.

Esto es útil en casos en los que realmente no se puede comparar su valor con su valor predeterminado, por ejemplo, si la propiedad es una función.

 14
Author: aurumpotestasest,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-28 15:03:10