Vue.js
Ranuras
Buscar..
Observaciones
¡Importante! Las ranuras después del render no garantizan el orden para las posiciones de las ranuras. La ranura, que fue la primera, puede tener una posición diferente después del render.
Uso de ranuras individuales
Las ranuras únicas se utilizan cuando un componente secundario solo define una slot dentro de su plantilla. El componente de la page anterior utiliza una única ranura para distribuir contenido.
A continuación se muestra un ejemplo de la plantilla del componente de la page que utiliza una única ranura:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<slot>
This will only be displayed if there is no content
to be distributed.
</slot>
</body>
</html>
Para ilustrar cómo funciona la ranura, podemos configurar una página de la siguiente manera.
<page>
<p>This content will be displayed within the page component</p>
</page>
El resultado final será:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
Si no colocáramos nada entre las etiquetas de page su lugar teníamos <page></page> , obtendríamos el siguiente resultado, ya que hay un contenido predeterminado entre las etiquetas de la slot en la plantilla del componente de la page .
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
¿Qué son las tragamonedas?
Las ranuras ofrecen una forma conveniente de distribuir contenido de un componente principal a un componente secundario. Este contenido puede ser cualquier cosa, desde texto, HTML o incluso otros componentes.
A veces puede ser útil pensar en las ranuras como un medio para inyectar contenido directamente en la plantilla de un componente secundario.
Las ranuras son especialmente útiles cuando la composición del componente debajo del componente principal no es siempre la misma.
Tomemos el siguiente ejemplo donde tenemos un componente de page . El contenido de la página podría cambiar en función de si esa página muestra, por ejemplo, un artículo, una publicación de blog o un formulario.
Artículo
<page>
<article></article>
<comments></comments>
</page>
Entrada en el blog
<page>
<blog-post></blog-post>
<comments></comments>
</page>
Formar
<page>
<form></form>
</page>
Observe cómo el contenido del componente de la page puede cambiar. Si no usáramos las ranuras, esto sería más difícil ya que la parte interna de la plantilla se arreglaría.
Recuerde: "Todo en la plantilla principal se compila en el ámbito primario; todo en la plantilla secundaria se compila en el ámbito secundario".
Usando ranuras nombradas
Las ranuras con nombre funcionan de manera similar a las ranuras individuales, pero en su lugar le permiten distribuir contenido a diferentes regiones dentro de su plantilla de componente secundaria.
Tome el componente de la page del ejemplo anterior, pero modifique su plantilla para que sea como sigue:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
Al usar el componente de la page , ahora podemos determinar dónde se coloca el contenido a través del atributo de slot :
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
La página resultante será:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
Si se define una slot sin un atributo de name , cualquier contenido que se coloque dentro de etiquetas de componentes que no especifiquen un atributo de slot se colocará en esa ranura.
Vea el ejemplo de inserción múltiple en los documentos oficiales de Vue.js.
Usando Slots en Vue JSX con 'babel-plugin-transform-vue-jsx'
Si estás usando VueJS2 y te gusta usar JSX junto con él. En este caso, para usar la ranura, a continuación se muestra la solución con el ejemplo. Tenemos que usar this.$slots.default Es casi como this.props.children en React JS.
Componente.js:
export default {
render(h) { //eslint-disable-line
return (
<li>
{ this.$slots.default }
</li>
);
}
};
ParentComponent.js
import Component from './Component';
export default {
render(h) { //eslint-disable-line
return (
<ul>
<Component>
Hello World
</Component>
</ul>
);
}
};
