Ausführliche Erläuterung der Verwendung von Slot-Sockeln in Vue-Komponenten

Dieses Mal werde ich Ihnen die Verwendung von Slot-Sockeln in Vue-Komponenten ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Slot-Sockeln in Vue-Komponenten?

Untergeordnete Komponente

<template>
  <p class="slotcontent">
    <ul>
      <!--<slot></slot>-->
      <li v-for="item in items">{{item.text}}</li>
    </ul>
  </p>
</template>
<script>
  export default{
    data(){
      return{
        items:[
          {id:1,text:'第1段'},
          {id:2,text:'第2段'},
          {id:3,text:'第3段'},
        ]
      }
    }
  }
</script>
<style scoped>
</style>

Übergeordnete Komponente

<template>
  <p>
    <h2>首页</h2>
    <router-link to="/home/details">跳转到详情</router-link>
    <p>父组件</p>
    <slotshow>
      <p>{{msg}}</p>
    </slotshow>
  </p>
</template>
<script>
  import slotshow from '../components/slotshow'
  export default{
    data(){
      return{
        msg:"测试内容"
      }
    },
    components:{
      slotshow
    }
  }
</script>
<style>
</style>

This The Wenn Sie möchten, dass die übergeordnete Komponente Inhalte in die untergeordnete Komponente einfügt, müssen Sie das Slot-Tag in der untergeordneten Komponente deklarieren. Wenn die untergeordnete Komponentenvorlage nicht den Socket enthält, wird der Inhalt der übergeordneten Komponente <p>{{msg}}</p> wird verworfen. < ;p>Standardwert

(p-Tag wird entfernt). Wenn der Slot einen Standardwert hat und das übergeordnete Element über Inhalte verfügt, die in eingefügt werden sollen, wird der in der übergeordneten Komponente festgelegte Wert verwendet angezeigt,

<slotshow></slotshow>

Benannter Slot

-Element kann einen speziellen Attributnamen

verwenden, um den Inhalt zu konfigurieren verteilt. Mehrere Slots können unterschiedliche Namen haben. Der benannte Slot stimmt mit Elementen mit dem entsprechenden Slot-Attribut im Inhaltsfragment überein

var childNode = {
 template: `
 <p class="child">
 <p>子组件</p>
 <slot name="my-header">头部默认值</slot>
 <slot name="my-body">主体默认值</slot>
 <slot name="my-footer">尾部默认值</slot>
 </p>
 `,
};
var parentNode = {
 template: `
 <p class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-header">我是头部</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </p>
 `,
 components: {
 'child': childNode
 },
};

Es kann immer noch ein anonymer Slot vorhanden sein, der der Standard-Slot ist, als ob kein passender Inhalt vorhanden wäre Fragment wurde gefunden. Ersatzsteckplatz. Anonyme Slots können nur als Slots für Elemente ohne Slot-Attribute verwendet werden, wenn kein Slot konfiguriert ist

var childNode = {
 template: `
 <p class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 <slot></slot>
 </p>
 `,
};
var parentNode = {
 template: `
 <p class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-body">我是主体</p>
 <p>我是其他内容</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </p>
 `,
 components: {
 'child': childNode
 },
};
<p slot="my-body">插入<slot name="my-body">中，<p>我是其他内容</p>插入<slot>中，而<p slot="my-footer">被丢弃

Wenn es keinen Standard-Slot gibt, werden diese verworfen Inhaltsfragmente, die keine Übereinstimmung finden, werden ebenfalls verworfen

var childNode = {
 template: `
 <p class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 </p>
 `,
};
var parentNode = {
 template: `
 <p class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-body">我是主体</p>
 <p>我是其他内容</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </p>
 `,
 components: {
 'child': childNode
 },
};
<p>我是其他内容</p>和<p slot="my-footer">都被抛弃

Scope-Slots

Ein Scope-Slot ist ein spezieller Slottyp, der zum Ersetzen eines gerenderten Elements durch eine wiederverwendbare Vorlage verwendet wird, an die Daten übergeben werden können.

Übergeben Sie in der untergeordneten Komponente einfach die Daten an den Slot, genau wie die Übergabe von Requisiten an die Komponente

<span style="font-size: 16px"><p class="child">
 <slot text="hello from child"></slot>
</p></span>

Im übergeordneten Element muss das