¿Qué son los componentes?
El componente es una de las características más potentes de Vue.js. Los componentes pueden extender los elementos HTML y encapsular el código reutilizable. En un nivel superior, los componentes son elementos personalizados, y el compilador de Vue.js le agrega características especiales. En algunos casos, los componentes también pueden estar en forma de elementos HTML nativos, extendidos con la función IS.
Contenido de distribución de ranuras
① Descripción general:
En pocas palabras, si el componente principal necesita colocar algunos DOM en el componente infantil, entonces estos DOM se muestran, no se muestran, donde se muestran y cómo se muestran, que es responsabilidad de la distribución de ranuras.
② Por defecto
No se muestran el contenido del componente principal que está encerrado dentro del componente infantil.
Por ejemplo Código:
<div id = "app"> <niños> <span> 12345 </span> <!-La línea anterior no se mostrará-> </filds> </div> <script> var vm = new vue ({el: '#app', componentes: {niños: {// Esto no tiene valor de retorno, y la plantilla> "Template no continuará distribuida:" }}); </script>El contenido de visualización es un botón de botón, que no contiene el contenido en la etiqueta SPAN;
Single Slot
En pocas palabras, si solo usa esta etiqueta, puede colocar el componente principal en el contenido del componente infantil y colocarlo que muestre.
<div id = "app"> <niños> <span> 12345 </span> <!-La línea de arriba no se mostrará-> </children> </div> <script> var vm = new vue ({el: '#app', componentes: {niños: {// Esto no tiene valor de retorno, y la plantilla no se continuará distribuida: "<botón> <slot> </slot> slot no tiene el valor de la temperatura de la temperatura. use la etiqueta del botón </boton> "}}}); </script>Por ejemplo, si escribe esto, el resultado es:
<botón> <span> 12345 </span> Para aclarar el alcance de la acción, use la etiqueta del botón </boton>
Es decir, el contenido del componente principal colocado en el componente infantil se insertan en la posición <slot> </slot> del componente infantil;
Tenga en cuenta que incluso si hay varias etiquetas, se insertarán juntas, lo que es equivalente a reemplazar la etiqueta <slot> </slot> con la etiqueta colocada en el componente infantil.
④ Slot llamado
Coloque diferentes etiquetas HTML colocadas en subcomponentes en diferentes ubicaciones
El componente principal agrega el atributo slot = "nombre" a la etiqueta que se distribuirá
El componente infantil agrega el atributo de nombre = "nombre de nombre" en la etiqueta de ranura de la ubicación de distribución correspondiente, y luego coloca la etiqueta correspondiente en la ubicación correspondiente.
Código de muestra:
<Div id = "App"> <Children> <span slot = "First"> 12345 </span> <span slot = "segundo"> 56789 </span> <!-La línea anterior no se mostrará-> </filds> </div> <script> var vm = new vue ({el el: '#app', componentes: {niños: {// Esto no ha vuelto valor, y el valor de retorno, y la template no será Template no "<boton> <slot name = 'First'> </slot> para aclarar el alcance de la acción, <slot name = 'segundo'> </slot>, así que use la etiqueta del botón </boton>"}}}); </script>El resultado se muestra como: (para la comodidad de ver, el descanso de la línea se ha ajustado manualmente)
<botton> <span slot = "first"> 12345 </span> Para aclarar el alcance de la acción, <span slot = "segundo"> 56789 </span> así que use la etiqueta del botón </botón>
⑤cope del contenido de distribución:
El alcance del contenido distribuido se determina en función de la plantilla donde se encuentra. Por ejemplo, la etiqueta anterior está controlada por la plantilla del componente principal (aunque está incluida por la etiqueta infantil del componente infantil, pero como no está en el atributo de plantilla del componente infantil, no pertenece al componente infantil), está controlado por el componente principal.
Código de muestra:
<div id = "App"> <Children> <span slot = "first" @click = "tobeknow"> 12345 </span> <span slot = "segundo"> 56789 </span> <!-La línea anterior no se mostrará-> </shils> </div> <script> var vm = new Vue ({el: '#App: Métodos: {ToBekNow () console.log ("es el método de los padres"); </script>Cuando se hace clic en el área del texto 12345 (en lugar de los botones todo), se activa el método Tobeknow del componente principal.
Pero al hacer clic en otras áreas, no hay efecto.
El tutorial oficial dice esto:
El contenido de la plantilla del componente principal se compila dentro del alcance del componente principal; El contenido de la plantilla de componente infantil se compila dentro del alcance del componente infantil
⑥ Consejos Cuando no hay contenido distribuido:
Si el componente principal no coloca una etiqueta en el componente infantil, o el componente principal coloca una etiqueta en el componente infantil, pero tiene un atributo de ranura, y el componente infantil no tiene una etiqueta para el atributo de ranura.
Luego, la etiqueta de ranura del componente infantil no desempeñará ningún papel.
A menos que haya contenido en la etiqueta de ranura, el contenido en la etiqueta de la ranura se mostrará cuando no haya contenido distribuido.
Como en el código de ejemplo:
<div id = "App"> <Children> <span slot = "primero"> 【12345】 </span> <!-La línea anterior no se mostrará-> </filds> </div> <script> var vm = new vue ({el: '#app', componentes: {niños: {// Esto no tiene valor de retorno y la plantilla no continuará distribuida: "Divada <divits <diviv name = 'First'> <boton> 【Si no hay contenido, me mostrará 1】 </boton> </lot> Para aclarar el alcance de la acción, <slot name = 'Last'> <boton> 【Si no hay contenido, me mostrará 2】 </botón> </lot> así que use la etiqueta del botón </div> "}}); </script>ilustrar:
【1】 La etiqueta de ranura con name = 'primero' se reemplaza por la etiqueta correspondiente al componente principal (el contenido dentro de la etiqueta de la ranura se descarta);
【2】 La etiqueta de ranura de nombre = 'Última', porque no hay contenido correspondiente, se mostrará el contenido dentro de la etiqueta de ranura.
⑦ Si desea controlar las propiedades de la etiqueta raíz del subcomponente
[1] En primer lugar, dado que la etiqueta de plantilla pertenece al componente principal, no es posible vincular las instrucciones del componente infantil a la etiqueta de plantilla (porque pertenece al componente principal);
[2] Si necesita controlar si se muestra el componente infantil (como V-IF o V-Show) a través del componente principal, entonces esta directiva obviamente pertenece al componente principal (como se coloca bajo los datos del componente principal). Las etiquetas se pueden escribir en la plantilla del componente infantil.
Como código:
<div id = "app"> <button @click = "toshow"> Haga clic para dejar que el componente infantil visualice </botón> <niños v-if = "abc"> </children> </div> <script> var vm = new Vue ({el: '#app', data: {ABC: false}, métodos: {toshow: function () {this.abc =! this.abc;},}, {niños: { {// Esto no tiene valor de retorno, plantilla: "<Div> Este es un componente infantil </div>"}}}); </script>ilustrar:
Controle si el componente infantil se muestra a través del componente principal (haga clic en el botón para cambiar el valor de la instrucción V-IF).
[3] Si necesita controlar si se muestra el componente infantil (por ejemplo, que se esconda), entonces esta instrucción obviamente pertenece al componente infantil (el valor se colocará bajo el atributo de datos del componente infantil), entonces no se puede escribir como anteriormente, pero debe colocarse en la etiqueta raíz del componente infantil.
<div id = "app"> <button @click = "toshow"> Haga clic para dejar que la pantalla del componente infantil </botón> <niños> <span slot = "first"> 【12345】 </span> <!-La línea de arriba no se mostrará-> </niños> </div> <script> var vm = new Vue ({el: '#App: Métodos: {Toshow: Función ()) this. $ Children [0] .tohidden = true; {this.tohidden =! this.tohidden; </script>ilustrar:
Al hacer clic en un componente infantil hará que el componente infantil desaparezca;
Haga clic en el botón del componente principal para redisir el componente infantil cambiando la propiedad tohidden del componente infantil.
Las instrucciones del componente infantil están vinculados a la plantilla del componente infantil (esto se puede llamar);
Lo anterior es una explicación detallada del ejemplo de distribución de contenido de la ranura del 11º componente Vuejs introducido por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!