El empaquetado de componentes de terceros en Vue es más elegante

En el desarrollo real, para reducir la reinvención repetida, mejorar la eficiencia del trabajo y ahorrar tiempo y costos de desarrollo, es inevitable utilizar bibliotecas de componentes de interfaz de usuario, como element-ui, que es muy popular en las interfaces web. Sin embargo, a veces necesitamos realizar algunas modificaciones basadas en el componente original, como un componente de imagen. Necesitamos unificar las imágenes específicas que se muestran cuando falla la carga de imágenes y agregarlas cada vez que se usa el componente, lo cual es engorroso y requiere mucho tiempo. La clave es que los costos de mantenimiento son altos. Cuando necesitemos actualizar esta imagen cargada, tenemos que encontrar los lugares para modificarla uno por uno.

Por ejemplo, los componentes de paginación personalizados también son comunes. El estilo del componente y la cantidad de páginas admitidas de forma predeterminada son beneficiosos para la mantenibilidad y la eficiencia del desarrollo.

Pero no es necesario escribir el componente de paginación desde cero. Solo necesita encapsularlo sobre la base original. Entonces, ¿cómo encapsular de forma rápida y elegante los componentes de una biblioteca de componentes de terceros? V-bind="atributos "y v? On="atributos "y v-on="atributos "y v? On="listeners"="$listeners " nos traerá sorpresas. Permiten que el componente encapsulado "herede" casi todas las propiedades v-bind y eventos v-on del componente original, y su uso y funciones son las mismas que las del componente original.

El-image está encapsulado como un componente de imagen personalizado. En todos los lugares donde se utiliza una imagen personalizada para mostrar imágenes, el mensaje "Cargando..." se mostrará uniformemente durante el proceso de carga de la imagen, y se mostrará una imagen predeterminada unificada cuando se produzca un error de carga. A continuación se muestra el proceso de carga de un componente de imagen personalizado y el impacto de los errores de carga.

Lo mejor de v-bind="$attrs " es que al crear componentes de nivel superior que encapsulan componentes de terceros,

puedes vincular automáticamente la v utilizada en el padre. alcance -bind los atributos,

y páselos al componente encapsulado usando v-bind="$attrs ".

Extracto de la introducción del sitio web oficial de vue

Por ejemplo, después de usar v-bind="$attrs" en nuestro componente de imagen personalizado empaquetado, también tenemos casi todas las propiedades de el- La imagen tiene el mismo efecto y uso que usar el-image. Es decir, podemos usar una imagen personalizada viendo el artículo de el-image.

Las funciones y el uso de v-on="listeners" son los mismos que V? ¿La función y el uso de bind="listeners " y la función y el uso de v-bind="listeners " están relacionados con V? Bind="attrs" es similar, puede pasar el tiempo de los oyentes que usan v-on en el ámbito principal a los componentes que usan v-on="listeners", y V? En el componente bind="listeners" y el componente v-bind="listeners", v? La función de bind="attrs" es similar, excepto que un atributo es un evento. Tome el componente de imagen personalizado como ejemplo. En este punto, el componente de imagen personalizado tiene casi todos los eventos del componente de imagen el. Y su efecto y uso son los mismos que usar el-image.

Ejemplo de uso de un componente de imagen personalizado