Desarrollo de componentes de Vue (3): el uso de ranuras

Creo que los amigos que tienen experiencia en el desarrollo de proyectos deben saber que a menudo hay varios lugares en el proyecto que requieren el uso de componentes con estilos similares pero detalles ligeramente diferentes, como la barra de navegación y la barra de búsqueda. Los componentes aparecen con frecuencia, pero en diferentes escenarios tenemos diferentes necesidades para el contenido de la barra de navegación. Sería muy problemático escribir un componente específicamente para esta sutil diferencia y la reutilización sería muy baja.

Algunos lectores pueden pensar que esto no es difícil de resolver. Para las incertidumbres en los componentes secundarios, podemos pasar valores a través de los accesorios del componente principal para resolverlos. del título en la barra de navegación. Se implementa pasando el valor al componente principal. (Por ejemplo, la barra de navegación 1 y la barra de navegación 2 a continuación)

Sí, cuando los componentes no cambian mucho, esto puede resolver el problema de la reutilización de componentes de manera muy conveniente. Pero, ¿qué pasa si quiero darme cuenta de que, según diferentes escenarios, la posición media de la barra de navegación puede ser el título, o puede ser un cuadro desplegable, un cuadro de búsqueda u otros componentes personalizados? En este punto nos resulta difícil ampliar la flexibilidad de nuestros componentes simplemente mediante accesorios. (Por ejemplo, la barra de navegación 1 y la barra de navegación 3 a continuación)

En un subcomponente, utilice el elemento especial para abrir una ranura para el subcomponente. Lo que se inserta en esta ranura depende de cómo se utiliza el componente principal. Podemos echar un vistazo al siguiente caso:

Usamos el componente secundario dos veces en la instancia de Vue. La primera vez el componente principal no pasó elementos al componente secundario y la segunda vez el componente principal. pasó elementos a componentes secundarios.

A juzgar por los resultados, cuando el componente principal no agrega elementos a la ranura del componente secundario, se mostrará el contenido predeterminado en la ranura. Si el componente principal pasa el contenido de la ranura, se mostrará el contenido de la ranura. Se sobrescribe y se muestra el contenido predeterminado de la ranura.

En la segunda sección, ya conocemos el uso básico de las ranuras, pero cuando las funciones de los subcomponentes son más complejas, es posible que tengamos que definir varias ranuras en el componente para cumplir con requisitos comerciales más flexibles. necesidades. Por ejemplo, en el ejemplo anterior de la barra de navegación JD, este componente se puede dividir en tres ranuras, correspondientes al contenido de las posiciones izquierda, derecha y media.

Pero existe un requisito previo para reservar múltiples espacios en un componente, es decir, debemos hacer que cada espacio tenga su identificador único correspondiente, de modo que cuando el componente principal entregue contenido, pueda identificar qué contenido corresponde a qué ranura.

Podemos echar un vistazo al siguiente caso:

Se definen tres ranuras con nombre en el componente secundario. Llamamos al componente secundario en el componente principal. no El contenido de la ranura correspondiente no se entrega completamente en orden. Pero, de hecho, podemos encontrar en los resultados de la demostración que no importa cuál sea el orden del contenido de la ranura pasado por el componente principal, el contenido de la ranura entrante se representará correctamente de acuerdo con el nombre de la ranura durante el análisis final.

Antes de explicar el alcance de la ranura, primero debemos comprender el alcance de la compilación. Específicamente, todo lo que esté en la plantilla del componente principal se compilará en el ámbito principal; todo lo que esté en la plantilla del componente secundario se compilará en el ámbito secundario.

Podemos entender esta regla a través del siguiente caso:

Tanto el componente principal como el componente secundario usan isShow para controlar la visualización del componente al mismo tiempo, en los datos. De los componentes padre e hijo, hay una variable con el mismo nombre isShow. Podemos ver en los resultados que si el componente secundario está definido en el componente principal y si su componente es visible depende del valor de la variable en los datos del componente principal.

El identificador isShow definido en la plantilla del subcomponente está restringido por las propias variables de datos del subcomponente, lo que significa que las variables en la plantilla del subcomponente aquí toman el valor de la variable en el ámbito secundario.

En la demostración de la sección anterior, ya podemos comprender el concepto de alcance de compilación y también saber que el componente principal no puede usar directamente los datos dentro del componente secundario (porque los datos dentro de la plantilla del componente secundario está en el componente secundario) dentro del alcance del componente). Pero en algunos escenarios, necesitamos que el componente principal reemplace la etiqueta de la ranura, pero el contenido lo proporciona el componente secundario. Bueno, en este momento podemos usar ranuras de alcance para resolver este problema.

Podemos echar un vistazo al siguiente caso: hay una matriz en el subcomponente, y ahora queremos usar ranuras para mostrar la matriz según las diferentes necesidades:

En el componente principal, definimos 2 formas de mostrar datos, una es mostrar los datos en forma de lista y la otra es dividir cada idioma con --. En uso, el subcomponente debe proporcionar datos expuestos externamente a través del método: data en la ranura. Cuando use el componente principal, primero defina la etiqueta