So verwenden Sie den Vue+Slot-Socket im Projekt

Dieses Mal zeige ich Ihnen, wie Sie den Vue+Slot-Socket im Projekt verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Vue+Slot-Sockets im Projekt gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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>

Diese Art 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 <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 zu konfigurieren, wie Inhalte verteilt werden. 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, die Daten an dieses Element übergeben kann.

Ü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