Explicación detallada de la ranura vue (ranura)

Recientemente, me preguntaron si sabía acerca de las tragamonedas de Vue. Cuando lo pensé por primera vez, parecía que rara vez usaba estas cosas. Así que resolví algunos usos de las tragamonedas.

ranura (el componente principal inserta contenido en el componente secundario <slot> </slot>)

Vue implementa un conjunto de API de distribución de contenido y utiliza <slot>elementos como salidas para llevar y distribuir contenido. Esta es la descripción en el documento vue. Específicamente, una ranura es un "espacio" que le permite agregar contenido dentro del componente. por ejemplo:

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
  </div>
</template>

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> </ebutton>
  </div>
</template>

Sabemos que si desea agregar contenido directamente al <ebutton> </ebutton> en el componente principal, no se representará en la página. Entonces, ¿cómo permitimos que se muestre el contenido agregado? Simplemente agregue una ranura en el subcomponente.

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button></button>
      <slot></slot>       //slot 可以放在任意位置。（这个位置就是父组件添加内容的显示位置）
  </div> 
</template>

El componente secundario puede agregar un espacio en cualquier posición, y esta posición es la posición de visualización del contenido agregado por el componente principal.

Compilar el alcance (el componente principal inserta datos en el componente secundario <slot> </slot>)

Como aprendimos anteriormente, una ranura es en realidad un 'espacio' que nos permite agregar contenido del componente principal al componente secundario. Podemos agregar cualquier valor de datos en el componente principal, por ejemplo:

//父组件：（引用子组件 ebutton）

<template>
  <div class= 'app'>
     <ebutton> {
   
   { parent }}</ebutton>
  </div>
</template>

new Vue({
  el:'.app',
  data:{
    parent:'父组件'
  }
})

La sintaxis para usar datos no ha cambiado en absoluto, pero ¿podemos usar directamente los datos en los subcomponentes? ¡Obviamente no! !

// 子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button> </button>
       <slot></slot>
  </div>
</template>

new Vue({
  el:'.button',
  data:{
    child:'子组件'
  }
})

// 父组件：（引用子组件 ebutton）

<template>
  <div class= 'app'>
     <ebutton> {
   
   { child }}</ebutton>
  </div>
</template>

No es posible pasar directamente los datos en el subcomponente. Porque: 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.

Contenido de la copia de seguridad (el subcomponente <slot> </slot> establece el valor predeterminado)

El llamado contenido de respaldo es en realidad el valor predeterminado del espacio. A veces, no agrego contenido en el componente principal, entonces el espacio mostrará el valor predeterminado, como por ejemplo:

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot> 这就是默认值 </slot>
  </div>
</template>

Ranura con nombre (varios subcomponentes <slot> </slot> <slot> </slot> correspondientes al contenido insertado)

A veces, puede haber más de un espacio en el componente secundario, entonces, ¿cómo insertamos el contenido correspondiente en el componente principal exactamente donde lo queremos? Simplemente dé un nombre a la ranura, es decir, agregue el atributo de nombre.

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one'> 这就是默认值1</slot>
      <slot name='two'> 这就是默认值2 </slot>
      <slot name='three'> 这就是默认值3 </slot>
  </div>
</template>

El componente principal agrega contenido a través de v-slot: name:

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 
        <template v-slot:one> 这是插入到one插槽的内容 </template>
        <template v-slot:two> 这是插入到two插槽的内容 </template>
        <template v-slot:three> 这是插入到three插槽的内容 </template>
     </ebutton>
  </div>
</template>

Por supuesto, por conveniencia, vue se puede abreviar como #one al escribir la forma de v-slot: one

Ranura de alcance (el componente principal usa los datos del componente secundario en el componente secundario <slot> </slot>)

A través de la ranura podemos agregar contenido al componente principal para el componente secundario. Al nombrar la ranura, podemos agregar contenido en más de una ubicación. Pero los datos que agregamos están en el componente principal. Dijimos anteriormente que no podemos usar directamente los datos en los subcomponentes, pero ¿tenemos otras formas de permitirnos usar los datos en los subcomponentes? De hecho, también podemos utilizar el método de ranura en V:

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot
  </div>           
</template>

new Vue({
  el:'.button',
  data:{
    child1:'数据1',
    child2:'数据2'
  }
})

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 
        <template v-slot:one = 'slotone'>  
           {
   
   { slotone.value1 }}    // 通过v-slot的语法 将子组件的value1值赋值给slotone 
        </template>
        <template v-slot:default = 'slottwo'> 
           {
   
   { slottwo.value2 }}  // 同上，由于子组件没有给slot命名，默认值就为default
        </template>
     </ebutton>
  </div>
</template>

En resumen:

Primero, vincule dinámicamente un valor a la ranura del componente secundario (: clave = 'valor')
Luego, en el componente principal, asigne este valor a los valores mediante v-slot: name = 'values'
Finalmente, obtenga los datos a través de { {values.key}}