Vue 學(xué)習(xí)筆記 九 、render函數(shù)
9.1 render函數(shù)初步了解
template下只允許有一個子節(jié)點
<div id="app">
<child :level="level">
klk
</child>
</div>
<!-- <template id="hdom">
<div>
<h1 v-if="level==1">
<slot></slot>
</h1>
<h2 v-if="level==2">
<slot></slot>
</h2>
<h3 v-if="level==3">
<slot></slot>
</h3>
</div>
</template> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//使用vue組件定義
// Vue.component('child', {
// props:['level'],
// template: '#hdom'
// })
//使用render定義
Vue.component('child', {
render: function(createElement){
return createElement('h'+this.level,
this.$slots.default);
},
props:['level']
})
var app = new Vue({
el: '#app',
data: {level:3}
})
</script>
9.2 render函數(shù)的第一個參數(shù)
在render函數(shù)的方法中妹笆，參數(shù)必須是createElement,createElement的類型是function，render函數(shù)的第一個參數(shù)可以是 String | Object | Function
<script>
Vue.component('child', {
// ----第一個參數(shù)必選
//String--html標(biāo)簽
//Object---一個含有數(shù)據(jù)選項的對象
//Function---方法返回含有數(shù)據(jù)選項的對象
render: function (createElement) {
alert(typeof createElement)
//return createElement('div')
// return createElement('h1')
// return createElement({
// template:'<div>鋤禾日當(dāng)午</div>'
// })
var domFun = function () {
return {
template: '<div>鋤禾日當(dāng)午</div>'
}
}
return createElement(domFun());
}
});
var app = new Vue({
el: '#app',
data: {level:3}
})
</script>
9.3 render函數(shù)的第二個參數(shù)
<div id="app">
<child></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
// ----第二個參數(shù)可選,第二個參數(shù)是數(shù)據(jù)對象----只能是Object
render: function(createElement) {
return createElement({
template: '<div>我是龍的傳人</div>'
}, {
'class': {
foo: true,
baz: false
},
style: {
color: 'red',
fontSize: '16px'
},
//正常的html特性
attrs: {
id: 'foo',
src: 'http://baidu.com'
},
//用來寫原生的Dom屬性
domProps: {
// innerHTML: '<span style="color:blue;font-size: 18px">我是藍(lán)色</span>'
}
})
}
});
var app = new Vue({
el: '#app',
data: {
level: 3
}
})
</script>
9.3 render函數(shù)的第三個參數(shù)
第三個參數(shù)也是可選===String | Array—作為我們構(gòu)建函數(shù)的子節(jié)點來使用的
Vue.component('child', {
// ----第三個參數(shù)是可選的，可以是 String | Array---代表子節(jié)點
render: function (createElement) {
return createElement('div', [
createElement('h1', '我是h1標(biāo)題'),
createElement('h6', '我是h6標(biāo)題')
])
}
});
9.4 this.$slots在render函數(shù)中的應(yīng)用
createElement(‘header’,header), 返回的就是VNODE
var header = this.$slots.header? //–這返回的內(nèi)容就是含有=VNODE的數(shù)組
Vue.component('child', {
render: function(createElement) {
var header = this.$slots.header;
var main = this.$slots.default;
var footer = this.$slots.footer;
return createElement('div', [
createElement('header', header),
createElement('main', main),
createElement('footer', footer)
]);
}
});
9.5 在render函數(shù)中使用props傳遞數(shù)據(jù)
Vue.component('my-component', {
props: ['show'],
render: function(createElement) {
var imgsrc;
if (this.show) {
imgsrc = 'img/001.jpg'
} else {
imgsrc = 'img/002.jpg'
}
return createElement('img', {
attrs: {
src: imgsrc
},
style: {
width: '600px',
height: '400px'
}
});
}
})
var app = new Vue({
el: '#app',
data: {
show: false
},
methods: {
switchShow() {
this.show = !this.show;
}
}
})
9.6 v--model在render函數(shù)中的使用
<div id="app">
<my-component :name="name" v-model="name"></my-component>
<br> {{name}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-component', {
props: ['name'],
render: function(createElement) {
var self = this; //指的就是當(dāng)前的VUE實例
return createElement('input', {
domProps: {
value: self.name
},
on: {
input: function(event) {
//此處的this指的是什么狸涌？指的就是window
// var a = this;
// console.log(a)
console.log(self)
self.$emit('input', event.target.value)
}
}
})
}
})
var app=new Vue({
el:'#app',
data:{
name:'',
}
})
9.7 作用域插槽在render函數(shù)中的使用
Vue.component('my-component', {
render:function(creatElement){
return creatElement('div',this.$scopedSlots.default({
text:'傳遞的信息',
msg:'scopetext'
}))
}
})
9.8 函數(shù)化組件的應(yīng)用
使用context的轉(zhuǎn)變
// this.text----context.props.text
//this.$slots.default-----context.children
functional: true,表示該組件無狀態(tài)無實例
Demo
<div id="app">
<my-component value="hhh">
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-component', {
functional: true, //當(dāng)前vue實例無狀態(tài)，無實例(沒有this的概念)
render: function(creatElement, context) {
return creatElement('button', {
on: {
click: function() {
console.log(context)
console.log(context.parent)
console.log(context.props.value)
}
}
}, '點擊學(xué)習(xí)context')
},
props: ['value']
})
var app = new Vue({
el: '#app',
data: {
msg: '父組件的msg'
}
})
</script>
