Die Verwendung von Slots in Vue

Inhaltsverzeichnis

Slot (Slot): Dies ist die von Vue bereitgestellte Fähigkeit für den Wrapper der Komponente. Ermöglicht dem Entwickler, den Teil zu definieren, der nicht sicher ist und vom Benutzer beim Einkapseln der Komponente als [Steckplatz] angegeben werden soll

Slots sind in drei Kategorien unterteilt: Standard-Slots, benannte Slots und bereichsbezogene Slots

1. Den Slot deklarieren,

Jeder Slot hat ein Namensattribut, der Standardwert ist default

<template>
  <div class="left-container">
    <!-- 当用户没有指定插槽是默认内容是slot标签里的内容 -->
    <slot name="default">这是default插槽默认的内容</slot>
  </div>
</template>

2. V-Slot-Anweisung:

Rendern Sie Inhalte im angegebenen Slot

<template>
  <div class="app-container">
    <div class="box">
        <!-- 默认情况下,在使用组件的时候,提供的内容都会被填充到名字为default的插槽中 -->
        <!-- 1.如果要把内容填充到指定的名称的插槽中,需要v-slot:这个指令 -->
        <!-- 2.v-slot:要跟上插槽的名称 -->
        <!-- 3.v-slot:指令不能用在元素身上,只能用在template上 -->
        <!-- 4.template这个标签是一个虚拟的标签,只起到包裹的作用,但不会被渲染成实质性的html元素-->
        <!-- 5.v-slot: 简写为# -->
        <template v-slot:default>
          <p>这是Left组件的内容区域，声明p标签</p>
        </template>
    </div>
  </div>
</template>

3. Benannte Slots

In derselben Komponente benötigen wir manchmal mehrere Steckplätze als reservierte Bereiche. Zu diesem Zeitpunkt sollten wir jedem Steckplatz einen anderen Namen geben

Beispiel: Die Studentenkomponente wird definiert und mehrere Slots werden festgelegt.

<template>
  <div>
      <!-- 名字 -->
      <div class="username">
          <slot></slot>
      </div>
 
      <!-- 性别 -->
      <div class="sex">
          <slot></slot>
      </div>
 
      <!-- 年龄 -->
      <div class="age">
          <slot></slot>
      </div>
  </div>
</template>


<template>
  <div class="box">
    
 
    <student>
      <h3>xxxx</h3>
    </student>
  </div>
</template>

Drei der Slots haben standardmäßig denselben Namen, und der darin geschriebene Inhalt wird gleichzeitig im Slot mit demselben Namen gerendert. Wenn Sie dem Slot das entsprechende Namensattribut zuweisen, wird diese Situation vermieden

4. Slots mit Gültigkeitsbereich

<template>
  <div class="right-container">
    <h3>student 组件</h3>
 
    <div class="content-box">
      <!-- 在封装组件时,为预留的<slot>提供属性对应的值,这种用法叫做"作用域插槽" -->
      <slot name="content" msg="刘兰健"></slot>
    </div>
  </div>
</template>
 
<!-- 在上块代码中，设置了msg="刘兰健"，我们此时需要在插槽内容区内拿到该数据： -->
<!-- 插槽内容部分 -->
<student>
  <template v-slot.content="obj"> 
        <div>
          <p>{
   
   { obj.msg }}</p>
        </div>
      </template>
</student>
<!-- 这里的msg就能获取到成功渲染 -->

5. Slot-Pass-Wert

im Kind2

<template>
  <div>
      <ul>
          <!-- 插槽传值 -->
          <slot :msg="newGames"></slot>
      </ul>
  </div>
</template>

<script>
export default {
    name:"child2",
    data() {
        return {
            newGames: ["天天酷跑", "PUBG", "LOL"],
        }
    },
}

im Kind1

 <child2>
      <!-- 插槽数据接收， 只能在模板标签上接收 -->
      <template slot-scope="newGames">
        <ul>
          <li v-for="item in newGames.msg" :key="item.index">{
     
     {item}}</li>
        </ul>
      </template>
  </child2>

Auf diese Weise kann der Wert in Kind2 an Kind1 übergeben werden, und dann wird der erhaltene Wert in die Liste gerendert