如何在Vue項目中使用render方法
本篇文章為大家展示了如何在Vue項目中使用render方法，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務額敏,10余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575
Vue的render方法說明
hello world
Vue.component('child', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
});
new Vue({
el: "#app"
})
雖然使用template定義組件的方法非常的直觀,但是這樣會造成代碼過長?？梢允褂胷ender的方法
Vue的render方法說明
hello world
Vue.component('child', {
render:function (createElement) {
var body=this.$slots.default;
//this.$slots返回了一個組件分發(fā)下來的元素和內(nèi)容
//this.$slots.default返回了具名的內(nèi)容
return createElement(
'h'+this.level,
//this.level是利用v-bind注入到組件中的level
body
)
},
//因為vue中組件父組件無法向子組件注入內(nèi)容。所以我們需要通過
//v-bind定義一個key，value向子組件注入內(nèi)容。所要接收的值也需要在定義組件時的props屬性中的定義一下
props:{
level:{
}
}
});
new Vue({
el: "#app"
})
下面是一個slot具名分發(fā)的demo:介紹了creatElement的用法:
Vue的render方法說明
this is header
this is center
this is footer
重慶分公司
重慶分公司
