¿Valores predeterminados para accesorios de componentes Vue y cómo verificar si un usuario no configuró el accesorio?

139

1. ¿Cómo puedo establecer el valor predeterminado para un accesorio de componente en Vue 2? Por ejemplo, hay un moviescomponente simple 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 predeterminado para el yearaccesorio.

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

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

o tal vez esto:

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

?

javascript vue.js vue-component PeraMika
fuente

Respuestas:

231

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

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

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

https://jsfiddle.net/cexbqe2q/

craig_h
fuente
2
¿Qué pasa con la segunda pregunta? ¿Es esta una buena manera: if (this.year != null) o tal vez esto: if (!this.year)o? ¡Gracias!
PeraMika
1
Si establece un valor predeterminado, el accesorio siempre se establecerá a menos que establezca el valor predeterminado en null. Si eso es lo que necesita para realizar alguna otra lógica if (this.year != null)o if (!this.year)es el camino a seguir.
craig_h
36

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

Inspección thisdentro del componente, tenemos this.$options.propsData. Si el accesorio está presente aquí, el usuario lo ha establecido explícitamente; los valores predeterminados no se muestran.

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

aurumpotestasest
fuente