render函数的学习：
2018-12-02 本文已影响0人
fyzm
render函数的第一个参数：
<body>
<div id="app" >
<child></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('child',{
render:function(createElement) {
var domFun = function(){
return {
template:'<div>锄禾日当午</div>'
}
}
return createElement(domFun());
}
})
var app= new Vue({
el:'#app'
})
</script>
</body>
render的第二个参数：
<body>
<div id="app" >
<child></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('child',{
render:function(createElement) {
return createElement({
template:'<div>我是龙的传人</div>'
},{
'class':{
foo:true,
baz:false
},
style:{
color:'red',
fontSize:'16px'
},
attrs:{
id:'foo',
src:'http://baidu.com'
},
domProps:{
innerHTML:'<span style="color:blue;font-size:18px" >我是蓝色</span>'
}
})
}
})
var app = new Vue({
el:"#app",
})
</script>
</body>
render函数的第三个参数：
<body>
<div id="app" >
<child></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('child',{
render:function(createElement) {
return createElement('div',[
createElement('h1','我是h1标题'),
createElement('h6','我是h6标题')
])
}
});
var app = new Vue({
el:"#app",
})
</script>
</body>
this.$slots在函数中应用：
render函数第三个参数存的就是VNODE
createElement('header',header)存的就是VNODE
var header = this.$slots.header;存的是VNODE的数组
<body>
<div id="app" >
<my-component>
<p>锄禾日当午</p>
<p>汗滴河下苦</p>
<H3 slot="header">我是标题</H3>
<H5 slot="footer">我是文章的最后一段</H5>
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('my-component',{
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)
]);
}
})
var app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
render函数中使用props传递数据：
<body>
<div id="app" >
<button @click = "switchShow">点击切换美女</button>{{show}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
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:'300px',
height:'400px'
}
});
}
})
var app = new Vue({
el:"#app",
data:{
show:false
},
methods:{
switchShow:function(){
this.show = !this.show
}
}
})
</script>
</body>
v-model在render函数中的使用：
<body>
<div id="app" >
<!--<my-component :name="name" @input="showName"></my-component>-->
<my-component :name="name" v-model="name"></my-component>
<br> {{name}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//需求：
Vue.component('my-component',{
render:function (createElement) {
var self = this;//指的就是当前的VUE实例
return createElement('input',{
domProps:{
value: self.name
},
on:{
input:function (event) {
debugger
var a = this;
//此处的this指的是什么？指的就是window
self.$emit('input',event.target.value)
}
}
})
},
props:['name']
})
var app = new Vue({
el:'#app',
data:{
name: 'JACK'
}
// methods:{
// showName:function (value) {
// this.name = value
// }
// }
})
</script>
</body>
作用域插槽在render函数中的应用：
<body>
<div id="app" >
<my-component>
<template scope = "prop">
{{prop.text}} <br>
{{prop.msg}}
</template>
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('my-component',{
render:function(createElement) {
return createElement('div',this.$scopedSlots.default({
text:'我是子组件传递过来的数据',
msg:'scopeText'
}))
}
})
var app = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
函数化组件：
<div id="app" >
<my-component value = "haha">
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('my-component',{
functional: true,//表示当前的vue实例无状态。无实例
render:function (createElement,context) {
return createElement('button',{
on:{
click:function () {
debugger
var a = this;
console.log(context)
console.log(context.parent)
// alert(context.parent.msg)
// alert(context.props.value)
alert(this.value)//undefined
}
}
},'点击我学习context')
},
props:['value']
})
var app = new Vue({
el:'#app',
data:{
msg:'我是父组件内容'
}
})
</script>
