Problem durch Vue-Slot gelöst: Inhalte dürfen nicht in die Mitte eingeführter Unterkomponenten-Tags geschrieben werden. Slot ist eine von Vue für Komponentenpaketierer bereitgestellte Funktion. Sie ermöglicht es Entwicklern, unsichere Teile zu definieren, die vom Benutzer beim Packen von Komponenten als Platzhalter für für den Benutzer reservierte Inhalte betrachtet werden können .
Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.
Wir wissen, dass in Vue Inhalte nicht in die Mitte der eingeführten Unterkomponenten-Tags geschrieben werden dürfen. Um dieses Problem zu lösen, führte der Beamte das Konzept des Slots ein.
Slots entsprechen eigentlich Platzhaltern. Es gibt Ihrer HTML-Vorlage einen Platz in der Komponente, sodass Sie einige Dinge übergeben können. Slots sind in anonyme Slots, benannte Slots und begrenzte Slots unterteilt.
Sie verstehen vielleicht nicht ganz, warum ich HTML an die Unterkomponente übergeben muss, anstatt es direkt in die Unterkomponente zu schreiben? Die Antwort ist diese. Sie können sich ein Szenario vorstellen, in dem Sie nur einen Bereich der fünf Seiten haben. Wie würden Sie diese fünf Seiten schreiben? Kopieren und Einfügen ist eine Möglichkeit, aber in Vue sind Slots besser.
Anonymer Slot, wir können ihn einen einzelnen Slot oder einen Standard-Slot nennen. Im Gegensatz zu benannten Slots ist es nicht erforderlich, das Namensattribut festzulegen. (Das Attribut „Hidden Name“ ist die Standardeinstellung.)
Beispiel:
Das Dateiverzeichnis lautet wie folgt und die Home-Komponente ist die übergeordnete Komponente von HelloWorld.
<template>
<div>
Helloworld组件
<div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
width:100%;
height:300px;
background:#ccc;
margin-top:50px;
.slotTxt{
width:500px;
height:200px;
margin:30px auto;
background:red;
}
}
</style>Benannter Slot
<template>
<div>
我是Home父组件
<helloworld>
<!-- 没有插槽，这里的内容不显示 -->
<h1>我是helloworld中的插槽啊</h1>
</helloworld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>Exception (deprecated slots=‘name’)
Benannte Slots mit Slot-Attribut sind seit 2.6.0 veraltet, vue3.x ist vollständig veraltet. Es kann nur CLI vor vue3 verwendet werden.<template>
<div>
Helloworld组件
<div>
<slot></slot>
</div>
<div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
width:700px;
height:300px;
background:#ccc;
margin: 0 auto;
margin-top:50px;
.slotLeft{
width:300px;
height:200px;
float:left;
background:red;
}
.slotRight{
width:300px;
height:200px;
float:right;
background:pink;
}
}
</style>Der Effekt ist der gleiche wie oben.
Wie v-on und v-bind hat auch v-slot eine Abkürzung, die alles vor dem Parameter (v-slot:) durch das Zeichen # ersetzt. Beispielsweise kann v-slot:header in #header umgeschrieben werden.
<template>
<div>
我是Home父组件
<helloworld>
<template>
<h1>name属性为left</h1>
</template>
<template>
<h1>name属性为right</h1>
</template>
</helloworld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
<style>
.home{
width:900px;
margin:0 auto;
background:yellow;
padding-bottom:100px;
}
</style><template>
<div>
我是Home父组件
<helloworld>
<h1>name属性为left</h1>
<h1>name属性为right</h1>
</helloworld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
<style>
.home{
width:900px;
margin:0 auto;
background:yellow;
padding-bottom:100px;
}
</style>bindet an das Element (v-bind:users="user") und wird als Slot-Requisite bezeichnet. Jetzt können wir im übergeordneten Bereich v-slot mit einem Wert verwenden, um den Namen der von uns bereitgestellten Slot-Requisite zu definieren.
语法：v-bind:users="user"
Home-Code der übergeordneten Komponente
<template>
<div>
Helloworld组件
<div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data(){
return{
user:{
name:'oralinge',
age:18
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
width:700px;
height:300px;
background:#ccc;
margin: 0 auto;
margin-top:50px;
.slotLeft{
width:300px;
height:200px;
// float:left;
background:red;
margin:20px auto
}
.slotRight{
width:300px;
height:200px;
float:right;
background:pink;
}
}
</style>Hinweis:
Die SlotProps in der übergeordneten Komponente können nach Belieben übernommen werden.
ist derselbe wie der anonyme Slot, ersetzen Sie einfach den Standardwert durch den Namenswert des Slots.
Unterkomponente HelloWorld-Code
语法：v-slot:default="随意取的名字" // default可省略，简写为v-slot="随意取的名字"
Übergeordnete Komponente Home-Code<template>
<div>
我是Home父组件
<helloworld>
<template>
<h1>{{slotProps.users.name}}</h1>
</template>
</helloworld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
<style>
.home{
width:900px;
margin:0 auto;
background:yellow;
padding-bottom:100px;
}
</style>
注意：
默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。
另，slot-scope写法在2.6之后已废弃，作用与上面相同，在此不做解释。
上面的写法是不是觉得有些麻烦？别着急，我们来看一看解构插槽 Prop。
解构插槽 Prop
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：
function (slotProps) {
// 插槽内容
}这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop。
语法：v-slot="{ users }"<template>
<div>
Helloworld组件
<div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data(){
return{
user:{
name:'hello world',
age:18
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
width:700px;
height:300px;
background:#ccc;
margin: 0 auto;
margin-top:50px;
.slotLeft{
width:300px;
height:200px;
// float:left;
background:red;
margin:20px auto
}
.slotRight{
width:300px;
height:200px;
float:right;
background:pink;
}
}
</style><template>
<div>
我是Home父组件
<helloworld>
<template>
<h1>{{users.name}}</h1>
</template>
</helloworld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
<style>
.home{
width:900px;
margin:0 auto;
background:yellow;
padding-bottom:100px;
}
</style>效果
<template>
<div>
我是Home父组件
<helloworld>
<template>
<h1>{{person.name}}</h1>
</template>
</helloworld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
<style>
.home{
width:900px;
margin:0 auto;
background:yellow;
padding-bottom:100px;
}
</style>效果如上图。
<template>
<div>
我是Home父组件
<helloworld>
<template>
<h1>{{users.name}}</h1>
</template>
</helloworld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
<style>
.home{
width:900px;
margin:0 auto;
background:yellow;
padding-bottom:100px;
}
</style><template>
<div>
<div>
<span>{{title}}</span>
<div>
<slot></slot>
</div>
</div>
<div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: {
title: {
type: String,
required: true
}
}
}
</script>
<style>
.title-box {
padding: 16px 0;
border-bottom: 1px solid #eff1f5;
.title {
font-family: MicrosoftYaHei;
font-size: 24px;
color: #283039;
letter-spacing: 0;
line-height: 24px;
&::before {
width: 4px;
margin-right: 20px;
content: "";
background-color: #5da1ff;
display: inline-block;
height: 20px;
vertical-align: middle;
}
}
.right {
float: right;
margin-right: 20px;
}
}
</style>使用的ui框架为ivew。
相关推荐：vue.js视频教程
Das obige ist der detaillierte Inhalt vonWelches Problem löst der Vue-Slot?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
