Prefacio
Los dos artículos anteriores introdujeron los métodos básicos de registro de componentes y comunicación entre componentes padre-hijo. Por supuesto, la comunicación de componentes padre-hijo no solo tiene propsatributos comunes , sino que también hay varios otros métodos, no introducidos primero. Introduzca principalmente la ranura aquí. ¿Qué es una ranura? Después de definir el componente, quiero agregar algunos contenidos nuevos al html. En este caso, definitivamente es imposible agregarlo desde la plantilla del componente nuevamente. Las tragamonedas pueden resolver este problema.
Ejemplo básico
<div id="app">
<father title="这里是标签">
插槽的使用
</father>
</div>
<template id="father">
<slot>father {
{title}}</slot>
</template>
En este ejemplo, uno se usa directamente <slot></slot>como elemento, el predeterminado es padre, pero <father></father>inserto una oración en la etiqueta, luego esta oración se representará directamente en la <slot></slot>etiqueta. Se puede notar <slot></slot>que hay uno en la etiqueta, {
{title}}si abre la consola, puede encontrar que hay un error, lo que significa que no podemos usar este valor. Como regla general, recuerde:
Todo el contenido de la plantilla principal se compila en el ámbito principal; todo el contenido de la plantilla secundaria se compila en el ámbito secundario.
Tragamonedas con nombre
A veces, necesitamos múltiples ranuras, en este caso, podemos nombrar la ranura y especificar el nombre cuando la usemos.
Este es el momento de reconocer una nueva instrucción v-slot:
use: expresiones de JavaScript que se pueden colocar en parámetros de función (la desestructuración se puede usar en entornos compatibles). Opcional, es decir, solo debe usarse al pasar prop a la ranura.
Parámetros: el nombre de la ranura (opcional, el valor predeterminado es predeterminado) está
limitado a :, <template> componentes (para una única ranura predeterminada con prop)
<body>
<div id="app">
<child>
<!-- name=child插槽 -->
<template v-slot:child>
...
</template>
<!-- 默认插槽 -->
<template v-slot>
...
</template>
<!-- name=otherr插槽的缩写 -->
<template #otherr>
...
</template>
</child>
</div>
<template id = "child">
<div>
<h1>I am a child</h1>
<slot name="child" >child</slot>
<slot>default</slot>
<slot name="otherr">other</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
child:{
template: "#child"
}
}
})
</script>
</body>
Mediante v-slotinstrucción, podemos vincular el nombre de la ranura y v-on, v-bindcomo instrucción, que hay abreviaturas #. Si no hay nada después de la instrucción, se utiliza la ranura predeterminada.
Ranura de alcance
El alcance de la ranura es permitir que el contenido de la ranura acceda a los datos solo en el subcomponente. Por ejemplo, considere una plantilla con los siguientes <current-user>componentes:
<span>
<slot>{
{ user.lastName }}</slot>
</span>
Es posible que deseemos cambiar el contenido alternativo y mostrarlo por nombre en lugar de por apellido. como sigue:
<current-user>
{
{ user.firstName }}
</current-user>
Sin embargo, el código anterior no funciona correctamente, porque solo los <current-user>componentes pueden acceder al usuario y el contenido que proporcionamos está en la representación principal.
Para que el contenido de las ranuras disponibles para el usuario en el padre, podemos ser usuario como <slot>un atributo de elemento vinculante hasta:
<span>
<slot v-bind:user="user">
{
{ user.lastName }}
</slot>
</span>
La vinculación <slot>del atributo del elemento se denomina prop de ranura. Ahora, en el ámbito principal, podemos usar con el valor del v-slotnombre para definir el accesorio de ranura que ofrecemos:
<current-user>
<template v-slot:default="slotProps">
{
{ slotProps.user.firstName }}
</template>
</current-user>
En este ejemplo, elegimos nombrar el objeto que contiene todos los accesorios de ranura slotProps, pero se puede usar cualquier nombre.
Siguiendo el caso de la última ranura nombrada, expanda la implementación:
<body>
<div id="app">
<child>
<!-- name=child插槽 -->
<template #child="value">
<p>value.cname: {
{value.cname}}</p>
</template>
<!-- 默认插槽 -->
<template v-slot="slotProps">
<p> slotProps.obj：{
{slotProps.obj}}</p>
</template>
<!-- name=otherr插槽的缩写 -->
<template #otherr="slotValue">
<p>slotValue.age:{
{slotValue.age}}</p>
</template>
</child>
</div>
<template id="child">
<div>
<h1>I am a child</h1>
<slot name="child" :cname="name">kid</slot>
<slot :obj="obj">sdfgdf</slot>
<slot name="otherr" :age="age">other</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
child:{
data(){
return{
name:"Jock",
age:18,
obj:[{
id:1,title:"aaaaa"},
{
id:2,title:"bbbbb"},
{
id:3,title:"ccccc"}]
}
},
template: "#child"
}
}
})
</script>
</body>
<!--
渲染效果
value.cname: Jock
slotProps.obj：[ { "id": 1, "title": "aaaaa" }, { "id": 2, "title": "bbbbb" }, { "id": 3, "title": "ccccc" } ]
slotValue.age:18
-->
para resumir
- A diferencia de la plantilla de atributos del componente, en este caso
<template>, se puede utilizar sin un elemento raíz. - Puede vincular las ranuras a través de v-slot: name o #name
v-slot:default="slotProps"El alcance se pasa por valor, porque el valor predeterminado se puede omitir env-slot="slotProps"- Cuando el alcance de la implementación puede escribirse en una ranura diferente
v-slot:name="value"o abreviarse como#name=“value” - El nombre se ha utilizado como
<slot>atributo y no se puede vincular como atributo en el intervalo de alcance.