ranuras en vue3

que es una ranura

Las ranuras son un mecanismo utilizado en los componentes para transportar contenido, lo que permite que los componentes acepten contenido arbitrario de otros componentes en tiempo de ejecución. Puede entenderse como un marcador de posición definido en el componente Vue para especificar la ubicación del contenido pasado al componente secundario en el componente principal. Puede insertar dinámicamente contenido diferente en el componente principal según sea necesario, y también puede aceptar los datos transmitidos desde el componente secundario.
Crear ranuras
En los componentes vue, use <slot>etiquetas para definir ranuras. Primero creamos un componente Product.vue en la carpeta de componentes y <slot>usamos ranuras en el componente Producto. El código es el siguiente

<template>
  <div>
    <h2>这是插槽之前的内容</h2>
      <slot></slot>
    <h3>这是插槽之后的内容</h3>
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>

Luego introduzca el componente Product.vue en APP.vue y <Product></Product>use un div en el medio de la etiqueta para completar el contenido que se mostrará en la ranura de Product.vue

<template>
  <div>
    <Product>
      <div>这里是从APP.vue填入Product组件slot中的内容</div>
    </Product>
  </div>
</template>
<script setup>
import Product from './components/Product.vue'
</script>

<style scoped>
</style>

Ejecutar, actualizar el navegador, el efecto es el siguiente

tipo de enchufe

Hay tres tipos de ranuras proporcionadas en Vue: ranuras predeterminadas, ranuras con nombre y ranuras con ámbito.

ranura predeterminada

La ranura predeterminada es el tipo de ranura más simple y común. Permite que un componente reciba cualquier contenido sin nombre y lo inserte como elemento secundario del componente. La ranura por defecto se suele declarar añadiendo una slotetiqueta Por ejemplo, si definimos un componente MyComponent.vue, su código es el siguiente:

<template>
  <div>
    <slot></slot>
  </div>
</template>

Cuando procesamos el componente en App.vue, cualquier contenido se puede insertar en el componente a través de esta ranura predeterminada, de la siguiente manera:

<MyComponent>
  <h1>hello world</h1>
</MyComponent>

Aquí, cuando llamamos MyComponental componente , MyComponentagregamos una h1etiqueta dentro de la etiqueta y completamos una parte del contenido. Este contenido se inyectará en <slot></slot>la etiqueta .

ranura con nombre

Como su nombre lo indica, una ranura con nombre es una ranura con un nombre, lo que permite a los desarrolladores insertar contenido de forma selectiva en una ranura con nombre de un componente. Declarar una ranura con nombre es muy simple, solo necesitamos agregar un atributo especial en la etiqueta de la ranura: nombre, que se utiliza para asignar una identificación única a cada ranura para determinar el contenido que se representará en cada lugar. Las ranuras con nombre se declaran así:

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

En el código anterior, declaro dos ranuras: una ranura llamada "encabezado" y una ranura predeterminada. Las ranuras con nombre se pueden usar de esta manera: cuando
se usan en un componente principal , para pasar el contenido de una ranura con nombre, necesitamos usar un elemento con una directiva v-slot y pasar el nombre de la ranura de destino a la directiva: v - slot se puede abreviar como #, por lo que se puede abreviar como . Significa "pasar esta parte del fragmento de plantilla a la ranura de encabezado del componente secundario"<MyComponent><template><template v-slot:header>
<template v-slot:header><template #header>

<MyComponent>
  <template #header>
    <h1>custom header</h1>
  </template>
  <p>main content</p>
</MyComponent>

Ranuras con alcance

Las ranuras de ámbito se pueden entender como "ranuras con datos". En algunos escenarios, el contenido de la ranura puede querer usar los datos en el dominio del componente principal y el dominio del componente secundario al mismo tiempo. En este caso, necesita usar la ranura del alcance. Las ranuras con alcance se pueden declarar así:

<template>
  <div>
    <slot name="header" :text="headerText"></slot>
  </div>
</template>

En el código anterior, se declara una ranura con nombre en MyComponentel componente #headery se le pasa una propiedad textllamada .

Necesitamos usar la directiva v-slot en el componente principal para pasar datos a la ranura del ámbito, así:

<template>
  <MyComponent>
    <template #header="slotProps">
      <h1>{
    
    {
    
    slotProps.text}}</h1>
    </template>
  </MyComponent>
</template>

En el componente principal v-slot, pasamos los datos #headera la ranura usando la directiva.

El contenido predeterminado de la ranura.

Es posible especificar un contenido predeterminado para un espacio en caso de que no se proporcione nada externamente. Por ejemplo, existe un componente EnviarBotón de este tipo:

<button type="submit">
  <slot></slot>
</button>

Si queremos representar "enviar" <button> dentro , solo tenemos que escribir "enviar" <slot>entre las etiquetas como contenido predeterminado:

<button type="submit">
  <slot>
    提交 <!-- 默认内容 -->
  </slot>
</button>

En este punto, cuando lo usamos en el componente principal sin proporcionar ningún contenido de ranura:

<SubmitButton />

"Enviar" se procesará como el contenido predeterminado:
pero si proporcionamos contenido de espacio:
guarde en el componente principal
, entonces el contenido proporcionado explícitamente reemplazará el contenido predeterminado

Uso de ranuras en componentes dinámicos

En un componente dinámico, el componente principal donde se encuentra la ranura debe envolverse con una etiqueta de componente para especificar el componente que debe cambiar dinámicamente y, al mismo tiempo, usar el comando v-bind para vincular dinámicamente los parámetros requeridos por el componente a un objeto JS y páselo al componente dinámico.

<template>
  <div>
    <component :is="currentComponent" v-bind="data">
      <slot v-bind:name="slotName"></slot>
    </component>
  </div>
</template>

combinación de tragamonedas

En un componente, se pueden usar varias ranuras al mismo tiempo, y podemos usar <template>etiquetas para combinar varias ranuras. Al mismo tiempo, podemos usar <template>etiquetas que contienen instrucciones v-if y v-for para un diseño de ranura más complejo.

<template>
  <div>
    <template #header>
      <h1>这是header插槽的内容</h1>
    </template>
    <template #main>
      <h1 v-if="showMainTitle">这是main插槽的标题</h1>
      <p v-for="item in list" :key="item.id">{
    
    {
    
     item.name }}</p>
    </template>
    <template #footer>
      <button @click="onClickFooterBtn">点击这个按钮会触发footer插槽的事件</button>
    </template>
  </div>
</template>

Uso avanzado de tragamonedas

reutilización de ranuras

En el desarrollo real, la misma ranura se puede reutilizar en varios componentes.En este momento, la ranura se puede definir en un componente independiente y luego hacer referencia cuando sea necesario. El siguiente código demuestra cómo definir una ranura en un componente independiente y luego hacer referencia a él en App.vue, ParentComponent.vue y AnotherComponent.vue respectivamente, a través de los siguientes pasos:

1. Primero defina un componente SlotComponent.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

2. Luego introduzca y llame a la ranura en un componente principal ParentComponent.vue que necesita llamar a la ranura

<template>
  <div>
    <slot-component>
      <h4>这里是在ParentComponent组件中引入SlotComponent.vue插槽的内容</h4>
    </slot-component> 
  </div>
</template>
<script setup>
import SlotComponent from './SlotComponent.vue';
</script>
<style scoped>
</style>

3. Introduzca y llame a la ranura en AnotherComponent.vue, otro componente principal que necesita llamar a la ranura

<template>
  <div>
    <slot-component>
      <h4>这里是在AnotherComponent组件中引入SlotComponent.vue插槽的内容</h4>
    </slot-component> 
  </div>
</template>
<script setup>
import SlotComponent from './SlotComponent.vue';
</script>
<style scoped>
</style>

4. Introduzca los componentes ParentComponent.vue, AnotherComponent.vue y SlotComponent.vue anteriores en App.vue, el código es el siguiente

<template>
  <div>
    <AnotherComponent></AnotherComponent>
    <h6>---------------------------------</h6>
    <ParentComponent></ParentComponent>
    <h6>---------------------------------</h6>
    <div>
      <SlotComponent>
        <h4>这里是在App组件中引入SlotComponent.vue插槽的内容</h4>
      </SlotComponent>
    </div>    
  </div>
</template>
<script setup>
import AnotherComponent from './components/AnotherComponent.vue';
import ParentComponent from './components/ParentComponent.vue'; 
import SlotComponent from './components/SlotComponent.vue';
</script>
<style scoped>
</style>

Ejecute el programa, actualice el navegador, puede ver el efecto de la siguiente manera

Utilice componentes dinámicos como ranuras

En el desarrollo real, también podemos renderizar componentes dinámicos como el contenido de las ranuras. El código de ejemplo es el siguiente:

Defina un componente DynamicComponent.vue que debe mostrarse dinámicamente,

<template>
  <h4>我是动态组件,我也可以放入SlotComponent组件定义的插槽中</h4>
</template>
<script setup>
</script>
<style scoped>
</style>

En App.vue, pase el componente dinámico a SlotComponent.vue definido anteriormente para la representación.

 <SlotComponent>
      <template #default>
        <component v-bind:is="DynamicComponent"></component>
      </template>
</SlotComponent> 

Ejecute, actualice el navegador, puede ver que el contenido se ha procesado correctamente

Reglas de prioridad para las franjas horarias

1. El contenido de la ranura predeterminada se especifica en el componente principal y el nombre de la ranura no se especifica en el componente secundario, y el componente principal se inserta en la ranura predeterminada de forma predeterminada.
código de componente principal

<SlotComponent>
      在子组件中没有指定插槽名,父组件默认插入到默认插槽中。
 </SlotComponent>

El código en el subcomponente SlotComponent

<template>
   <div>
    <slot></slot>
    <h4>***********************************</h4>
    <slot name="header">
      这里是名称为header插槽的默认内容
    </slot>
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>

El efecto de la operación es el siguiente

2. Si se especifica un nombre de ranura en el componente principal y hay una ranura con el mismo nombre en el componente secundario, el contenido de la ranura del componente principal sobrescribirá el contenido de la ranura del componente secundario.

El siguiente código especifica el contenido de la ranura denominado "encabezado" en el componente principal, y hay una ranura con el mismo nombre en el componente secundario, y el contenido de la ranura del componente principal anulará el contenido de la ranura del componente secundario.

código de componente principal

 <SlotComponent>
      如果在父组件中指定了插槽名，在子组件中有相同名称的插槽，父组件插槽内容会覆盖子组件插槽内容。
      <template v-slot:header>
        父组件指定了名称为“header”的插槽内容，在子组件中有相同名称的插槽，父组件插槽内容会覆盖子组件插槽内容。
      </template>
    </SlotComponent>

Efecto de ejecución

3. La instrucción de ranura en V se utiliza en el componente principal y no se especifica ningún nombre en el componente secundario. La ranura sin nombre del componente principal se asignará a la ranura predeterminada del componente secundario.

<SlotComponent>   
  <template v-slot>
   在父组件中使用了 v-slot 指令，子组件中没有指定名称，父组件的未命名插槽会分配到子组件的名为“default”的插槽中。
  </template> 
 <template v-slot:header>
    这里是header插槽的内容
  </template>
</SlotComponent>

Ejecute el código, el efecto es el siguiente

4. El nombre se especifica tanto en el componente principal como en el componente secundario, y el contenido de la ranura con el nombre especificado en el componente principal sobrescribirá el contenido de la ranura con el mismo nombre en el componente secundario .

Ok, este es el final de la introducción sobre cómo usar las tragamonedas en vue3, amigos a los que les gusta, les gusta, siguen y agregan a favoritos.