In diesem Artikel wird hauptsächlich die Methode zur Verteilung von Vue2.0-Slot-Inhalten und zur Überprüfung von Requisiten vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.
Verwenden Sie eine Möglichkeit, den Inhalt der übergeordneten Komponente und der eigenen Vorlage der untergeordneten Komponente zu mischen. Verwenden Sie spezielle
Slot-Verteilungsinhalt
Übersicht:
Einfach ausgedrückt: Wenn die übergeordnete Komponente etwas DOM in das untergeordnete Element einfügen muss Komponente: Ob diese DOMs angezeigt werden, nicht angezeigt werden, wo sie angezeigt werden und wie sie angezeigt werden, ist die Aufgabe der Slot-Verteilung.
Standardmäßig
Der Inhalt der übergeordneten Komponente innerhalb der untergeordneten Komponente wird nicht angezeigt.
Beispielcode:
<p id="app">
<children>
<span>12345</span>
<!--上面这行不会显示-->
</children>
</p>
<script>
var vm = new Vue({
el: '#app',
components: {
children: { //这个无返回值，不会继续派发
template: "<button>为了明确作用范围，所以使用button标签</button>"
}
}
});
</script>Der angezeigte Inhalt ist eine Schaltfläche und enthält nicht den Inhalt im Span-Tag;
1 >
In der Vorlage der untergeordneten Komponente gibt es ein Slot-Tag, das als Backup-Inhalt gilt und verwendet wird, wenn die übergeordnete Komponente keinen Inhalt bereitstellt. Wenn die übergeordnete Komponente Inhalte bereitstellt, wird das gesamte Inhaltsfragment in den DOM-Speicherort des Slots eingefügt und das Slot-Tag selbst ersetzt. Die untergeordnete Komponentenvorlage enthält kein Slot-Tag und der von der übergeordneten Komponente bereitgestellte Inhalt wird verworfen. Wenn viele Inhalte ersetzt werden müssen, können diese direkt ersetzt werden mit einer Vorlage.<p id="app">
<h2>自定义组件</h2>
<custom>
<!-- 当卸载自定义标签之前的内容，要混合子组件中的模板 -->
<p>我是父组件提供的内容，我的存在会替换子组件中slot标签内的内容</p>
</custom>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
template:`
<p>
<slot>
<p>我备用内容，如果子组件中有内容会替换我哦~</p>
</slot>
</p>
`
})
new Vue({
el:"#app"
})
</script> 
2. Ja Das Slot
<p id="app">
<h2>自定义组件</h2>
<custom>
<!-- <p slot="one">我替换one</p> -->
<p slot="three">我替换three</p>
<p slot="two">我替换two</p>
<span slot="two">我替换two</span>
<p slot="one">我替换one</p>
</custom>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
template:`
<p>
<slot name="one">
<p>我是one</p>
</slot>
<slot name="two">
<p>我是two</p>
</slot>
<slot name="three">
<p>我是three</p>
</slot>
</p>
`
})
new Vue({
el:"#app"
})
</script> 
<p id="app">
<h2>自定义组件</h2>
<custom>
<!-- <p slot="one">我替换one</p> -->
<p slot="three">我替换three</p>
<p slot="two">我替换two</p>
<span slot="two">我替换two</span>
<p slot="one">我替换one</p>
<p>替换无名的slot</p>
<p>替换无名的slot</p>
<p>替换无名的slot</p>
</custom>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
template:`
<p>
<slot name="one">
<p>我是one</p>
</slot>
<slot name="two">
<p>我是two</p>
</slot>
<slot name="three">
<p>我是three</p>
</slot>
<slot>
<p>我是无名的slot</p>
</slot>
</p>
`
})
new Vue({
el:"#app"
})
</script> 
3. Kompilierungsumfang
Der Inhalt der übergeordneten Komponentenvorlage ist in Die übergeordnete Komponente wird im Bereich kompiliertDer Inhalt der Unterkomponentenvorlage wird im Bereich der Unterkomponente kompiliert<p id="app">
<h2>自定义组件</h2>
<custom>
<!-- 渲染的数据，是父组件中的数据，如果想使用子组件中的数据，就在子组件中建立自己的数据 -->
{{message}}
</custom>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
data(){
return {
message:"我是子组件的数据"
}
},
template:`
<p>
<p>我是{{message}}</p>
<slot>
// 这的内容会被父组件中内容替换
<p> {{message}}</p>
</slot>
</p>
`
})
new Vue({
el:"#app",
data:{
message:"我是父组件的数据"
}
})
</script> 
Einseitiger Datenfluss
Daten werden von der übergeordneten Komponente zur untergeordneten Komponente weitergeleitet und können nur einzeln gebunden werden. Die von der übergeordneten Komponente übergebenen Daten sollten in der untergeordneten Komponente nicht geändert werden. Ändernde Requisite: 1. Verwendung als Anfangswert lokaler Daten in Daten 2. Als berechnetes Attribut in einer UnterkomponenteRequisitenüberprüfung
Um unnötige Fehler zu vermeiden, wenn die übergeordnete Komponente Werte an die untergeordnete Komponente überträgt, können wir den Typ des Prop-Werts so festlegen, dass bei der Übertragung der übergeordneten Komponente der Wert an die untergeordnete Komponente, genauer
props:{
propA:Number, 数值类型
propB:[String,Number], 多种类型
propC:{type:String,required:true}, 必填项
propD:{type:Number,default:100}, 默认是
propE:{typr:Number,default:function(){return 1000}}
propF:{validator:function(value){return value>2}} 符合value>2的值
}
Vue.component('custom-cmpontent',{
data(){
return {
incrementCount:this.count //作为局部组件的data的初始值
}
},
props:{
count:{
type:Number, // 类型
default:10, // 默认值
required:true //必须要传参数
}
},
computed:{
incrementCount2(){
return this.incrementCount
}
},
template:`
<p>
<h2>我是一个自定义组件</h2>
<input type='button' value="改变count的值" @click="changeCount">
{{incrementCount}}
</p>
`,
methods:{
changeCount:function(value){
this.incrementCount++;
this.$emit('receive')
}
}
})
new Vue({
el:"#app",
data:{
count:0
},
methods:{
countH:function(){
this.count++;
}
}
})So verwenden Sie das Anforderungsnetzwerk für Anforderungsvorgänge in WeChat-Miniprogrammen
So verwenden Sie Ajax in WeChat Mini -Programme, die eine Anforderung für Serverdaten implementieren
Was sind die speziellen Datentypen in JavaScript
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Slot-Verteilungsinhalte in Vue2.0. 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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
