Luego el contenido anterior: https://www.cnblogs.com/yanggb/p/12602256.html .
Prop de componentes
El apoyo es una forma importante de comunicación entre componentes, es muy importante comprender sus conocimientos.
Prop case (camelCase vs kebab-case)
Sabemos que los nombres de los atributos en html no distinguen entre mayúsculas y minúsculas, porque el navegador interpretará todos los caracteres en mayúsculas como minúsculas. Esto significa que cuando se usa una plantilla en dom, el nombre de utilería de camelCase (nomenclatura de camello) debe nombrarse utilizando su caso de kebab equivalente (nomenclatura de separación de línea nocturna).
Vue.component ('blog-post' , {
//
accesorios de CamelCase en JavaScript : ['postTitle' ],
plantilla: '<h3> {{postTitle}} </ h3>'
})
<! - Kebab-case en HTML- > < blog-post post-title = "hola!" > </ Blog-post >
Nuevamente, si usa una plantilla de cadena, esta limitación no existe.
Tipos de utilería
En todo el contenido anterior, solo hemos visto los accesorios enumerados como una matriz de cadenas.
accesorios: ['título', 'me gusta', 'isPublished', 'commentIds', 'author']
Pero en muchos casos, esperamos que cada accesorio tenga un tipo de valor específico. Por lo tanto, vue admite la inclusión de accesorios en forma de objetos. Los nombres y valores de estas propiedades son los nombres y tipos de accesorios respectivos:
accesorios: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, ContactsPromise: Promise // o cualquier otro constructor }
De esta forma, no solo se proporciona documentación para sus componentes, sino que también se le solicita al usuario desde la consola de JavaScript del navegador cuando se encuentra con el tipo incorrecto.
Pase Prop estático o dinámico
De esta manera, ya sabes que puedes pasar un valor estático para apuntalar así:
< blog-post title = "Mi viaje con Vue" > </ blog-post >
También sabe que la utilería se puede asignar dinámicamente a través del comando [v-bind]:
<! - Asigna dinámicamente un valor variable- > < blog-post v-bind: title = "post.title" > </ blog-post > <! - Asigna dinámicamente un valor de expresión complejo- > < blog-post v-bind: title = "post.title + 'by' + post.author.name" > </ blog-post >
En los dos ejemplos anteriores, los valores que pasamos son todos de tipo cadena. De hecho, cualquier tipo de valor se puede pasar a un accesorio.
Pase un número para apuntalar
<! - Incluso si 42 es estático, aún necesitamos v-bind para decirle a Vue que esta es una expresión de JavaScript en lugar de una cadena, de lo contrario, se tratará como una cadena. -> < blog-post v-bind: likes = "42" > </ blog-post > <! - Use una variable para la asignación dinámica. -> < blog-post v-bind: likes = "post.likes" > </ blog-post >
Pase un valor booleano a prop
<! - Incluyendo el caso donde el accesorio no tiene valor, significa verdadero, que es una sintaxis especial para los accesorios booleanos. -> < blog-post es-publicado > </ blog-post > <! - Incluso si false es estático, aún necesitamos v-bind para decirle a Vue que esta es una expresión de JavaScript en lugar de una cadena, de lo contrario, será Tratado como una cuerda. -> < blog-post v-bind: is-publishing = "false" > </ blog-post > <! - Use una variable para la asignación dinámica. -> < blog-post v-bind: is- publishing = "post.isPublished" > </ blog-post >
Pase en una matriz para apuntalar
<! - Incluso si la matriz es estática, todavía necesitamos v-bind para decirle a Vue que esta es una expresión de JavaScript en lugar de una cadena, de lo contrario, se tratará como una cadena. -> < blog-post v-bind: comment-ids = "[234, 266, 273]" > </ blog-post > <! - Use una variable para la asignación dinámica. -> < blog-post v-bind: comment-ids = "post.commentIds" > </ blog-post >
Pase un objeto para apuntalar
<! - Incluso si el objeto es estático, aún necesitamos v-bind para decirle a Vue que se trata de una expresión de JavaScript en lugar de una cadena, de lo contrario, se tratará como una cadena. -> < blog-post v-bind: author = "{ name: 'Veronica', compañía: 'Veridian Dynamics' }" > </ blog-post > <! - Use una variable para la asignación dinámica. -> < blog-post v-bind: author = "post.author" > </ blog-post >
Pase todas las propiedades de un objeto para apuntalar
Si desea pasar todas las propiedades de un objeto como accesorio, puede usar el comando [v-bind] sin parámetros (en lugar del comando [v-bind: prop-name]).
Por ejemplo, para una publicación de objeto determinada:
publicación: { id: 1 , título: 'Mi viaje con Vue' }
La siguiente plantilla:
< blog-post v-bind = "post" > </ blog-post >
Es equivalente a:
< blog-post v-bind: id = "post.id" v-bind: title = "post.title" > </ blog-post >
Tenga en cuenta la distinción de pasar un objeto arriba, la diferencia es que el receptor define accesorios.
Flujo de datos unidireccional
Todos los accesorios forman un enlace descendente unidireccional entre los accesorios padre e hijo: la actualización del accesorio padre fluirá hacia los componentes hijos, pero no es posible lo contrario. El propósito de este diseño es evitar el cambio accidental del estado del componente primario del componente secundario, lo que hace que el flujo de datos de su aplicación sea difícil de entender.
Además, cada vez que se actualiza el componente principal, todos los accesorios del componente secundario se actualizarán al último valor. Esto significa que no debe cambiar la utilería dentro de un subcomponente, de lo contrario, emitirá una advertencia en la consola del navegador, ya que este es un comportamiento que hará que su lógica de flujo de datos se vuelva confusa.
Hay dos casos comunes de intentar cambiar un accesorio:
1. Un accesorio fue diseñado originalmente para usarse para pasar un valor inicial, pero los subcomponentes luego quieren usarlo como datos de apoyo locales. En este caso, es mejor definir un atributo de hit local y usar este accesorio como su valor inicial.
accesorios: ['initialCounter' ], data: function () { return { counter: this .initialCounter } }
2. Un accesorio está diseñado para convertirse después de pasar el valor original. En este caso, es mejor usar el valor de este accesorio para definir una propiedad calculada.
accesorios: ['tamaño' ], calculado: { normalizedSize: function () { devuelve este .size.trim (). toLowerCase () } }
Cabe señalar que en JavaScript, los objetos y las matrices se pasan por referencia, por lo que para una matriz o un tipo de objeto, cambiar este objeto o matriz en un componente secundario afectará el estado del componente principal.
verificación de utilería
También podemos especificar requisitos de verificación para el accesorio del componente. Si no se cumple un requisito, vue le avisará en la consola del navegador. Tal mecanismo es especialmente útil cuando se desarrolla un componente que será utilizado por otros.
Para personalizar el método de verificación de accesorios, puede proporcionar un objeto con requisitos de verificación para los valores en accesorios en lugar de una matriz de cadenas.
Vue.component ('my-component' , {
props: {
// comprobación básica de tipos (nulo e indefinido pasará cualquier tipo de verificación)
propA: Number,
// múltiples tipos posibles
propB: [String, Number],
/ / Cadena requerida
propC: {
type: String,
required: true
},
//
Número con valor predeterminado
propD: { type: Number,
default : 100
},
// Objeto con valor predeterminado
propE: {
type : Object,
// El valor predeterminado del objeto o matriz debe obtenerse de una función de fábrica
default : function () {
return {message: 'hello'}
}
},
// Función de verificación personalizada
propF: {
validador: función (valor) {
// Este valor debe coincidir con una de las siguientes cadenas
devuelven ['éxito', 'advertencia', 'peligro']. IndexOf (valor )! == -1
}
}
}
})
Cuando falla la verificación de utilería, la versión de compilación del entorno de desarrollo de vue generará una advertencia de consola.
Además, debe tenerse en cuenta que prop se verificará antes de crear una instancia de componente, por lo que las propiedades de la instancia (como datos, calculados, etc.) no están disponibles en la función predeterminada o de validación. Por lo tanto, no utilice los atributos de la instancia en las funciones predeterminadas o de validación, de lo contrario, la verificación puede fallar todo el tiempo.
Tipo de verificación
El tipo de tipo puede ser uno de los siguientes constructores nativos (tenga en cuenta la estricta distinción entre mayúsculas y minúsculas):
Cadena
Número
Arreglo
booleano
Objeto
Fecha
Función
Símbolo
Además, el tipo también puede ser un constructor personalizado.
function Person (firstName, lastName) { this .firstName = firstName this .lastName = lastName }
Vue.component ('blog-post' , {
props: {
author: Person
}
})
De hecho, la verificación de tipo se verifica mediante la palabra clave instanciade, por lo que en el ejemplo anterior, el método de verificación es verificar si el valor del atributo de autor es creado por una nueva Persona.
Atributo no prop
Un atributo no prop se refiere a un componente, pero el componente no tiene un atributo definido por el prop correspondiente.
Debido a que los accesorios definidos explícitamente son adecuados para pasar información a un subcomponente, el autor de la biblioteca de componentes no siempre puede prever para qué escenarios se utilizará el componente. Es por eso que los componentes pueden recibir atributos arbitrarios, y estos atributos se agregarán al elemento raíz de este componente.
Por ejemplo, imagine que hace referencia a un componente de <bootstrap-date-input> de terceros a través de un complemento bootstrap. Este complemento necesita usar un atributo de selector de fecha de datos en su <input>. Podemos pasar este atributo Agregue a la instancia del componente, para que este atributo se agregue automáticamente al elemento raíz <input> del componente <bootstrap-date-input>, y el parámetro se pasa al complemento de terceros a través del componente.
< bootstrap-date-input data-date-picker = "activado" > </ bootstrap-date-input >
Este mecanismo será útil en tales escenarios especiales.
Reemplazar / fusionar atributos existentes
Imagine la plantilla para <bootstrap-date-input> como esta:
< input type = "date" class = "form-control" >
Para personalizar un tema para nuestro complemento selector de fechas, es posible que debamos agregar un nombre de clase especial como este:
< bootstrap-date-input data-date-picker = "active" class = "date-picker-theme-dark" > </ bootstrap-date-input >
En este caso, hemos definido dos valores de clase diferentes:
1.form-control: se configura en la plantilla del componente.
2.date-picker-theme-dark: Esto se pasa desde el padre del componente.
Para la mayoría de los atributos, el valor proporcionado al componente desde el exterior reemplazará el valor establecido dentro del componente. Por lo tanto, si se pasa type = "text", se reemplazará con type = "date" y se destruirá. Los atributos de clase y estilo son ligeramente más inteligentes, no [reemplazo], sino [fusión], por lo que el valor final obtenido en el ejemplo anterior es datos de control de formulario date-picker-theme-dark, la clase importada externamente El valor se agregará después del valor de clase definido internamente.
Deshabilitar herencia de atributos
Si no desea que el elemento raíz del componente herede el atributo, puede hacerlo estableciendo [inheritAttrs: false] en las opciones del componente.
Vue.component ('my-component' , {
inheritAttrs: false ,
// ...
})
Esto es especialmente adecuado para su uso con el atributo $ attrs de una instancia, que contiene el nombre del atributo y el valor del atributo pasado a un componente, por ejemplo:
{ obligatorio: verdadero , marcador de posición: 'Ingrese su nombre de usuario' }
Con [inheritAttrs: false] y [$ attrs], puede decidir manualmente a qué elemento se asignarán estos atributos, que a menudo se usa al escribir componentes básicos.
Vue.component ('base-input' , {
inheritAttrs: false ,
props: [ 'label', 'value' ],
template: `
<label>
{{label}}
< input
v -bind =" $ attrs "
v - bind: value = "value"
v -on: input = "$ emit ('input', $ event.target.value)">
</label> `
})
Este patrón le permite usar el elemento html original cuando usa el componente básico, sin preocuparse de qué elemento es el elemento raíz real.
< base-input v-model = "username" required placeholder = "Ingrese su nombre de usuario" > </ base-input >
En el ejemplo anterior, aunque la opción [herencia: falsos] se usa en el componente para evitar que el elemento raíz del componente herede automáticamente los atributos pasados del componente principal, pero porque <v-bind = "$ attrs se agrega a <input> "] Instrucción (la función de $ attrs es obtener todos los atributos pasados del componente primario), lo que equivale a heredar todos los atributos pasados del componente primario. Además, independientemente de si se usa el atributo [herencia / falso: falso], puede usar el atributo global [$ attrs] provisto por vue para obtener los atributos pasados del componente padre.
Lo último que se debe tener en cuenta es que, debido a la particularidad de los dos atributos de estilo y clase, la opción [inheritAttrs: false] no afecta la vinculación de estilo y clase, aún serán heredados y fusionados por el elemento raíz en el componente.
"Todavía me gustas mucho, como dejar blanco en tinta y azul, sin dejar rastros".