Dieses Mal werde ich Ihnen die Verwendung der Render-Methode mit Bildern und Text ausführlich erklären. Was sind die Vorsichtsmaßnahmen für die Verwendung der Render-Methode? Hier sind praktische Fälle, schauen wir uns das an.
Lassen Sie mich zunächst über mein persönliches Verständnis der Demo auf der offiziellen Website sprechen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html>
<html>
<head>
<title>Vue的render方法说明</title>
<script src= "vue.js" ></script>
</head>
<body>
<p id= "app" >
<child :level= "1" >
hello world
</child>
</p>
<script type= "text/x-template" id= "anchored-heading-template" >
<p>
<h1 v- if = "level === 1" >
<slot></slot>
</h1>
<h2 v- if = "level === 2" >
<slot></slot>
</h2>
<h3 v- if = "level === 3" >
<slot></slot>
</h3>
<h4 v- if = "level === 4" >
<slot></slot>
</h4>
<h5 v- if = "level === 5" >
<slot></slot>
</h5>
<h6 v- if = "level === 6" >
<slot></slot>
</h6>
</p>
</script>
<script type= "text/javascript" >
Vue.component( 'child' , {
template: '#anchored-heading-template' ,
props: {
level: {
type: Number,
required: true
}
}
});
new Vue({
el: "#app"
})
</script>
</body>
</html>
|
Nach dem Login kopieren
Obwohl die Methode, Vorlagen zum Definieren von Komponenten zu verwenden, sehr intuitiv ist, Dadurch wird der Code zu lang. Sie können die Render-Methode verwenden
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html>
<html>
<head>
<title>Vue的render方法说明</title>
<script src= "vue.js" ></script>
</head>
<body>
<p id= "app" >
<child :level= "1" >
hello world
</child>
</p>
<script type= "text/javascript" >
Vue.component( 'child' , {
render: function (createElement) {
var body=this. $slots . default ;
return createElement(
'h' +this.level,
body
)
},
props:{
level:{
}
}
});
new Vue({
el: "#app"
})
</script>
</body>
</html>
|
Nach dem Login kopieren
Das Folgende ist eine Demo der Slot-Namensverteilung: Einführung in die Verwendung von createElement:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html>
<html>
<head>
<title>Vue的render方法说明</title>
<script src= "vue.js" ></script>
</head>
<body>
<p id= "app" >
<child>
<p slot= "header" >this is header</p>
<p slot= "center" >this is center</p>
<p slot= "footer" >this is footer</p>
</child>
</p>
<script type= "text/javascript" >
Vue.component( 'child' , {
render: function (createElement) {
var header=this. $slots .header;
var center=this. $slots .center;
var footer=this. $slots .footer;
return createElement( 'p' ,[
createElement( 'p' , header),
createElement( 'p' , center),
createElement( 'p' , footer),
])
}
});
new Vue({
el: "#app"
})
</script>
</body>
</html>
|
Nach dem Login kopieren
Die Demo-Ergebnisse der erstellten Komponente sind wie folgt :
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Anzeigen von Markierungen und Polylinien auf Baidu-Karten
So entwickeln Sie ein WeChat-Applet, um Benutzermobile zu erhalten Telefonnummern Funktion
Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung der Verwendung der Render-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!