Heim > Artikel > Web-Frontend > Vue-Inhaltsverteilungsslot
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
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
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 Testinhalt verworfen 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 Wenn es mehr als einen anonymen Slot gibt, meldet Vue einen Fehler 【Standardeinstellung 】 Alles, was anfänglich im Wenn der Slot einen Standardwert hat und das übergeordnete Element in < ;child> Wenn kein Inhalt einzufügen ist, wird der Standardwert angezeigt hat einen Standardwert und das übergeordnete Element ist in Wenn in -Element kann ein spezielles Attribut Es kann immer noch ein anonymer Slot, der Einfügen in Ich bin anderer Inhalt< ; /p> wird in <slot> eingefügt und wird verworfen i Andere Inhalte< /p> und werden aufgegeben 作用域插槽是一种特殊类型的插槽,用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。 在子组件中,只需将数据传递到插槽,就像将 props 传递给组件一样 在父级中,具有特殊属性 如果渲染以上结果,得到的输出是 【列表组件】 作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项 Das obige ist der detaillierte Inhalt vonVue-Inhaltsverteilungsslot. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!Anonymer Slot
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
},
};
var childNode = {
template: ` <p class="child">
<p>子组件</p>
<slot></slot>
<slot></slot>
</p>
`,
};
<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 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
},
};
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
},
};
<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
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
},
};
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
},
};
var childNode = {
template: ` <p class="child">
<p>子组件</p>
<slot name="my-body">主体默认值</slot>
</p>
`,
};
作用域插槽
<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
},
};