Vue中render函数基本用法（详细教程）
本篇文章主要介绍了Vue中render函数的使用方法，现在分享给大家，也给大家做个参考。
render函数
vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。
什么情况下适合使用render函数
在一次封装一套通用按钮组件的工作中，按钮有四个样式(default success error )。首先，你可能会想到如下实现
<p v-if="type === 'success'">success</p> <p v-else-if="type === 'error'">error</p> <p v-else-if="type === 'warm'">warm</p> <p v-else>default</p>
这样写在按钮样式少的时候完全没有问题，但是试想，如果需要的按钮样式有十多个，按钮内的文字根据实际情况而定(如success按钮内的文字可能是OK、GOOD等等)。那么template写死的方式就显得很无力了。遇上类似这样的情况，使用render函数可以说最优选择了。
根据实际情况改写按钮组件
首先render函数生成的内容相当于template的内容，故使用render函数时，在.vue文件中需要先把template标签去掉。只保留逻辑层。
export default {
render(h) {
return h('p',{
'class': {
btn: true,
success: this.type === 'success',
error: this.type === 'error',
warm: this.type === 'warm',
default: this.type === 'default'
},
domProps: {
innerHTML: this.$slots.default[0].text
},
on: {
click: this.clickHandle
}
})
},
methods: {
clickHandle() {
// dosomething
}
},
props: {
type: {
type: String,
default: 'default'
},
text: {
type: String,
default: 'default'
}
}
};根据组件化思维，能抽象出来的东西绝不写死在逻辑上。这里的clickHandle函数可以根据按钮的type类型触发不同的逻辑，就不多叙述了。
然后在父组件调用
<btn
v-for="(btn, index) in testData"
:type="btn.type"
:text="btn.text"
:key="index">{{btn.text}}
</btn>使用jsx
是的，要记住每个参数的类型同用法，按序传参实在是太麻烦了。那么其实可以用jsx来优化这个繁琐的过程。
return (
<p
class={{
btn: true,
success: this.type === 'success',
error: this.type === 'error',
warm: this.type === 'warm',
default: this.type === 'default'
}}
onClick={this.clickHandle}>
{this.$slots.default[0].text}
</p>
)示例二：
在遇到写类似的组件的时候需要写很多很长的代码，出于简洁（懒惰使人进步）的角度来说，我们应该找到更合适的方法来实现该效果。
<body>
<p id="app">
<mycomment :level="2">
这是h2元素
</mycomment>
</p>
</body>
<script type="text/x-template" id="is">
<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>
Vue.component('mycomment',{
template:'#is',
props:{
level:{
type:Number,
required:true,
}
}
})
var app =new Vue({
el:'#app',
})
</script>这时候Render 函数就很好的解决了这个问题，先来简单一点额例子，算是有基本的骨架了
<body>
<p id="app">
<render-teample :level="4">
render function
</render-teample>
</p>
</body>
<script>
Vue.component('render-teample',{
render:function(createElement){
return createElement(
'h'+this.level,
this.$slots.default
)
},
props: {
level: {
type: Number,
required: true
}
}
var app=new Vue({
el:"#app",
});
</script>然后进一步给你的组件加入你想要的样式需要事件，变得有血有肉
<body>
<p id="app">
<render-teample :level="4" >
<p class="jah" slot="myslot">render function</p>
</render-teample>
</p>
</body>
<script>
Vue.component('render-teample',{
render:function(createElement){
return createElement(
'h'+this.level,
{
'class':{
show:true,
hide:false,
},
style:{
width:'200px',
height:'400px',
background:'red',
},
attrs:{
name:'h-ex',
id:'h-id'
},
props:{
myprops:true,
},
on: {
click: function(event){
alert(this.num)
}
},
nativeOn:{
click:function(event) {
alert(1111)
}
}
},
[
this.$slots.myslot,
createElement('p',{
domProps:{
innerHTML:'holle render'
}
})
]
)
},
props: {
level: {
type: Number,
required: true
}
}
});
var app=new Vue({
el:"#app",
data:{
num:110
}
});
</script>注意：约束组件中 VNodes 必须是唯一的。
直接把所有元素写在一个createElement()下是很痛苦的，不利于维护。
所以通常会
var com1= createElement('p','item1');var com2= createElement('p','item1');
可以使用return createElement('p',[com1,com2])
这种情况是禁止的return createElement('p',[com1,com1])
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci Vue中render函数基本用法（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Cara menggunakan echarts dalam vue
May 09, 2024 pm 04:24 PM
Menggunakan ECharts dalam Vue memudahkan untuk menambahkan keupayaan visualisasi data pada aplikasi anda. Langkah khusus termasuk: memasang pakej ECharts dan Vue ECharts, memperkenalkan ECharts, mencipta komponen carta, mengkonfigurasi pilihan, menggunakan komponen carta, menjadikan carta responsif kepada data Vue, menambah ciri interaktif dan menggunakan penggunaan lanjutan.
Peranan lalai eksport dalam vue
May 09, 2024 pm 06:48 PM
Soalan: Apakah peranan lalai eksport dalam Vue? Penerangan terperinci: eksport lalai mentakrifkan eksport lalai komponen. Apabila mengimport, komponen diimport secara automatik. Permudahkan proses import, tingkatkan kejelasan dan cegah konflik. Biasa digunakan untuk mengeksport komponen individu, menggunakan kedua-dua eksport bernama dan lalai, dan mendaftarkan komponen global.
Cara menggunakan fungsi peta dalam vue
May 09, 2024 pm 06:54 PM
Fungsi peta Vue.js ialah fungsi tertib tinggi terbina dalam yang mencipta tatasusunan baharu di mana setiap elemen ialah hasil yang diubah bagi setiap elemen dalam tatasusunan asal. Sintaks ialah map(callbackFn), di mana callbackFn menerima setiap elemen dalam tatasusunan sebagai argumen pertama, secara pilihan indeks sebagai argumen kedua, dan mengembalikan nilai. Fungsi peta tidak mengubah tatasusunan asal.
Perbezaan antara acara dan $event dalam vue
May 08, 2024 pm 04:42 PM
Dalam Vue.js, acara ialah peristiwa JavaScript asli yang dicetuskan oleh penyemak imbas, manakala $event ialah objek peristiwa abstrak khusus Vue yang digunakan dalam komponen Vue. Secara amnya lebih mudah untuk menggunakan $event kerana ia diformat dan dipertingkatkan untuk menyokong pengikatan data. Gunakan acara apabila anda perlu mengakses kefungsian khusus objek acara asli.
Peranan onmounted dalam vue
May 09, 2024 pm 02:51 PM
onMounted ialah cangkuk kitaran hayat pemasangan komponen dalam Vue Fungsinya adalah untuk melaksanakan operasi pemulaan selepas komponen dipasang pada DOM, seperti mendapatkan rujukan kepada elemen DOM, menetapkan data, menghantar permintaan HTTP, mendaftarkan pendengar acara, dsb. Ia hanya dipanggil sekali apabila komponen dipasang Jika anda perlu melakukan operasi selepas komponen dikemas kini atau sebelum ia dimusnahkan, anda boleh menggunakan cangkuk kitar hayat yang lain.
Perbezaan antara eksport dan eksport lalai dalam vue
May 08, 2024 pm 05:27 PM
Terdapat dua cara untuk mengeksport modul dalam Vue.js: eksport dan eksport lalai. eksport digunakan untuk mengeksport entiti bernama dan memerlukan penggunaan pendakap kerinting lalai eksport digunakan untuk mengeksport entiti lalai dan tidak memerlukan pendakap kerinting. Apabila mengimport, entiti yang dieksport melalui eksport perlu menggunakan nama mereka, manakala entiti yang dieksport secara lalai eksport boleh digunakan secara tersirat. Adalah disyorkan untuk menggunakan lalai eksport untuk modul yang perlu diimport beberapa kali dan menggunakan eksport untuk modul yang hanya dieksport sekali.
Apakah cangkuk dalam vue
May 09, 2024 pm 06:33 PM
Cangkuk Vue ialah fungsi panggil balik yang melakukan tindakan pada peristiwa tertentu atau peringkat kitaran hayat. Ia termasuk cangkuk kitaran hayat (seperti beforeCreate, mounted, beforeDestroy), cangkuk pengendalian acara (seperti klik, input, keydown) dan cangkuk tersuai. Cangkuk meningkatkan kawalan komponen, bertindak balas kepada kitaran hayat komponen, mengendalikan interaksi pengguna dan meningkatkan kebolehgunaan semula komponen. Untuk menggunakan cangkuk, hanya tentukan fungsi cangkuk, laksanakan logik dan kembalikan nilai pilihan.
Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue?
May 09, 2024 pm 02:33 PM
Pengubah suai acara Vue.js digunakan untuk menambah gelagat tertentu, termasuk: menghalang gelagat lalai (.prevent) menghentikan acara menggelegak (.stop) acara sekali (.sekali) menangkap acara (.capture) mendengar acara pasif (.pasif) Suai pengubah suai (.self)Pengubah suai kunci (.key)
