Uso básico y resumen de v-solt en vue

Uso básico y resumen de v-solt en vue

Tragamonedas con nombre

<div class="container"> 
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

Para tales casos, el <slot>elemento tiene un atributo especial: nombre

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

En el momento en que las ranuras con nombre proporcionan contenido, podemos <template>usar el elemento de las instrucciones de la ranura en v y proporcionar su nombre como un parámetro de la ranura en v de: (Tenga en cuenta que <template v-slot:header>los comandos de la ranura en v deben colocarse <template>dentro)

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

Entonces será renderizado

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

Ranura de alcance

La comprensión de las ranuras de alcance proviene de este enlace

Creo que debemos pensar en los escenarios de aplicación de las ranuras de alcance del flujo de datos entre componentes.
Suponiendo que en el primer escenario, necesita escribir un componente de tarjeta de producto y mostrar varias tarjetas en un bucle, y debe saltar a la página de detalles del producto en respuesta al evento de clic de la imagen u otro contenido en cada tarjeta. ¿Qué vas a hacer? Escribir

Usaré el siguiente método de procesamiento, primero escribiré la tarjeta de productos básicos como un componente Commodity.vue y usaré un v-for en CommodityList.vue para procesar la visualización de la lista de tarjetas de productos básicos.

<commodity v-for="(item,index) in commodities" @clickCommodity="onCommodityClick"></commodity>

El componente Commodity pasa el evento clickCommodity como el componente principal a través de $ emit y transporta los datos del producto. El componente principal puede obtener los datos en el método onCommodityClick para el procesamiento comercial, completando así una transferencia de datos básicos del elemento secundario al principal

¿Y si lo abstrayéramos un poco? Por ejemplo, tengo varias columnas operativas, como "buenos productos" y "me encanta comprar" en la página de inicio de Taobao. Cada columna necesita una lista de tarjetas de productos, luego la lista de tarjetas de productos CommodityList.vue también se dibujará Componente. Y este componente vue que contiene múltiples columnas de operación, supongo que se llama ColumnList.vue, en el que se llama al componente CommodityList a través de v-for.

Nota : El negocio está aquí, quiero procesar el negocio de hacer clic en la tarjeta del producto en ColumnList.vue. ¿Qué os imagináis chicos? Una forma de hacer esto es cuando se hace clic en el botón de productos básicos, el componente de productos básicos $EmITa\; travésconocidoCOmmODITYLIST.VUE,yCOmmODITYLISTcontactoconelcosasmiembrocon$ Emit vomitar, entonces ColumnList .vue puede manejar este evento de clic. No hay ningún problema, pero parece que los subcomponentes son muy impuros y no tienen nada que ver con el negocio.

Entonces, ¿cómo resolver este problema con gracia? En este momento, la ranura del visor es realmente útil.

El servicio de clic de la tarjeta de productos básicos enCommodityClick, que debe ser manejado por CommodityList, se promueve a ColumnList a través de la ranura de alcance.

<el-row :gutter="20">
        <el-col :span="12" v-for="(column, index) in columnList" :key="index">
            <el-card class="box-card card-column">
                <div slot="header" class="clearfix">
                    <span>{
   
   {column.columnName}}</span>
                </div>
                <commodity-list :commodities="column.commodityList">
                    <template slot-scope="scope">
                    <!-- 这里只需要给Commodity组件传入数据，响应Commodity组件的clickCommodity事件即可。
                        事件不必携带参数，完全符合父到子的数据流向，而不会发生子组件又给父组件反向发数据的情况 -->
                        <commodity :modityData="scope.row" @clickCommodity="onCommodityClick(scope.row)"></commodity>
                    </template>
                </commodity-list>
            </el-card>
        </el-col>
</el-row>

El componente CommodityList debe transformarse en este. Slot recibe el componente de tarjeta de producto del componente principal. No involucra el negocio del componente de producto, y solo se enfoca en otros negocios y diseños.

<el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in commodities" :key="index" style="margin-top:20px;">
            <slot :row="item"></slot>
        </el-col>
</el-row>

En resumen, las ranuras con alcance son adecuadas para escenarios que contienen al menos tres o más niveles de componentes, lo cual es una excelente solución de componentes.