Vue-Inhaltsverteilungsslot

Vorherige Wörter

Damit Komponenten zusammengestellt werden können, ist eine Möglichkeit erforderlich, den Inhalt der übergeordneten Komponente mit der eigenen Vorlage der untergeordneten Komponente zu mischen. Dieser Prozess wird Content Distribution (oder „Transklusion“) genannt. Vue implementiert eine Inhaltsverteilungs-API, die dem aktuellen Entwurf der Webkomponentenspezifikation folgt und spezielle <slot>-Elemente als Slots für Rohinhalte verwendet. In diesem Artikel wird der Inhaltsverteilungs-Slot von Vue ausführlich vorgestellt

Kompilierungsumfang

Bevor Sie sich eingehend mit der Inhaltsverteilungs-API befassen, klären Sie zunächst, in welchem ​​Umfang der Inhalt kompiliert wird. Angenommen, die Vorlage ist

<child-component>
  {{ message }}
</child-component>

　　message, sollte sie an die Daten der übergeordneten Komponente oder an die Daten der untergeordneten Komponente gebunden werden? Die Antwort sind übergeordnete Komponenten. Komponentenbereich bedeutet einfach: Der Inhalt der übergeordneten Komponentenvorlage wird im übergeordneten Komponentenbereich kompiliert; der Inhalt der untergeordneten Komponentenvorlage wird im untergeordneten Komponentenbereich kompiliert.

Ein häufiger Fehler besteht darin, eine Direktive an die Eigenschaft/Methode einer untergeordneten Komponente innerhalb der übergeordneten Komponentenvorlage zu binden:

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

Unter der Annahme, dass someChildProperty eine Eigenschaft einer untergeordneten Komponente ist, funktioniert das obige Beispiel nicht wie erwartet. Die übergeordnete Komponentenvorlage sollte den Status der untergeordneten Komponente nicht kennen

Wenn Sie eine bereichsbezogene Direktive an den Stammknoten einer Komponente binden möchten, sollten Sie dies auf der eigenen Vorlage der Komponente tun:

Vue.component('child-component', {
  // 有效，因为是在正确的作用域内
  template: '<p v-show="someChildProperty">Child</p>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

Ebenso werden verteilte Inhalte im übergeordneten Bereich kompiliert

Standardmäßig verworfen

Im Allgemeinen, wenn Die untergeordnete Komponentenvorlage enthält keinen <slot> Socket, der Inhalt der übergeordneten Komponente wird verworfen

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

<p id="example">
  <parent></parent></p><script src="https://unpkg.com/vue"></script><script>var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
  </p>  `,
};var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>  `,
  components: {    'child': childNode
  },
};// 创建根实例new Vue({
  el: '#example',
  components: {    'parent': parentNode
  }
})</script>

Wie in der Abbildung unten gezeigt, wird der in enthaltene

Testinhalt verworfen

Anonymer Slot

Wenn die untergeordnete Komponentenvorlage nur einen Slot ohne Attribute hat, wird das gesamte Inhaltsfragment der übergeordneten Komponente in den DOM-Speicherort eingefügt, an dem sich der Slot befindet , und das Slot-Tag selbst wird ersetzt

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot></slot>
  </p>
  `,
};

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Wenn es mehr als einen anonymen Slot gibt, meldet Vue einen Fehler

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot></slot>
    <slot></slot>
  </p>
  `,
};

【Standardeinstellung 】

Alles, was anfänglich im <slot>-Tag enthalten ist, gilt als Fallback-Inhalt oder als Standardwerte. Der Fallback-Inhalt wird im Rahmen der untergeordneten Komponente kompiliert und nur angezeigt, wenn das Hostelement leer ist und kein Inhalt eingefügt werden kann

Wenn der Slot einen Standardwert hat und das übergeordnete Element in < ;child> Wenn kein Inhalt einzufügen ist, wird der Standardwert

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child></child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

angezeigt hat einen Standardwert und das übergeordnete Element ist in Wenn in Inhalte eingefügt werden sollen, ist der Einstellungswert

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>我是设置值</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Benannte Slot

-Element kann ein spezielles Attribut 　　<slot> verwenden, um zu konfigurieren, wie Inhalte verteilt werden. Mehrere Slots können unterschiedliche Namen haben. Benannte Slots stimmen mit Elementen mit dem entsprechenden name-Attribut im Inhaltsfragment überein: >slot

Es kann immer noch ein anonymer Slot, der

Standardslot

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

, als Fallback vorhanden sein Slot, wenn kein passender Inhalt gefunden wird. Anonyme Slots können nur als Slots für Elemente ohne Slot-Attribute verwendet werden. Wenn Slots nicht für Elemente mit Slot-Attributen konfiguriert sind, werden sie verworfen

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

　

Einfügen in,

Ich bin anderer Inhalt< ; /p> wird in <slot> eingefügt und

wird verworfen

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot name="my-body">主体默认值</slot>
    <slot></slot>
  </p>
  `,
};

Wenn es keinen Standard-Slot gibt, können diese nicht Es werden Inhaltsfragmente gefunden, die zu

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
  },
};

　

i Andere Inhalte< /p> und

werden aufgegeben

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot name="my-body">主体默认值</slot>
  </p>
  `,
};

作用域插槽

　　作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

　　在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样

<p class="child">
  <slot text="hello from child"></slot></p>

　　在父级中，具有特殊属性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
      <slot xxx="hello from child"></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <template scope="props">
        <p>hello from parent</p>
        <p>{{ props.xxx }}</p>
      </template>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

　　如果渲染以上结果，得到的输出是

【列表组件】

　　作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项

var childNode = {
  template: `  <ul>
    <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
  </ul>
  `,
  data(){
    return{
      items:[
        {id:1,text:'第1段'},
        {id:2,text:'第2段'},
        {id:3,text:'第3段'},
      ]
    }
  }
};

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <template slot="item" scope="props">
        <li>{{ props.text }}</li>
      </template>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

 

Das obige ist der detaillierte Inhalt vonVue-Inhaltsverteilungsslot. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!