Vue 学习笔记 九 、render函数
9.1 render函数初步了解
template下只允许有一个子节点
<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函数的第一个参数
在render函数的方法中，参数必须是createElement,createElement的类型是function，render函数的第一个参数可以是 String | Object | Function
<script>
Vue.component('child', {
// ----第一个参数必选
//String--html标签
//Object---一个含有数据选项的对象
//Function---方法返回含有数据选项的对象
render: function (createElement) {
alert(typeof createElement)
//return createElement('div')
// return createElement('h1')
// return createElement({
// template:'<div>锄禾日当午</div>'
// })
var domFun = function () {
return {
template: '<div>锄禾日当午</div>'
}
}
return createElement(domFun());
}
});
var app = new Vue({
el: '#app',
data: {level:3}
})
</script>
9.3 render函数的第二个参数
<div id="app">
<child></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
// ----第二个参数可选,第二个参数是数据对象----只能是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">我是蓝色</span>'
}
})
}
});
var app = new Vue({
el: '#app',
data: {
level: 3
}
})
</script>
9.3 render函数的第三个参数
第三个参数也是可选===String | Array—作为我们构建函数的子节点来使用的
Vue.component('child', {
// ----第三个参数是可选的，可以是 String | Array---代表子节点
render: function (createElement) {
return createElement('div', [
createElement('h1', '我是h1标题'),
createElement('h6', '我是h6标题')
])
}
});
9.4 this.$slots在render函数中的应用
createElement(‘header’,header), 返回的就是VNODE
var header = this.$slots.header; //–这返回的内容就是含有=VNODE的数组
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函数中使用props传递数据
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函数中的使用
<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; //指的就是当前的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函数中的使用
Vue.component('my-component', {
render:function(creatElement){
return creatElement('div',this.$scopedSlots.default({
text:'传递的信息',
msg:'scopetext'
}))
}
})
9.8 函数化组件的应用
使用context的转变
// this.text----context.props.text
//this.$slots.default-----context.children
functional: true,表示该组件无状态无实例
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, //当前vue实例无状态，无实例(没有this的概念)
render: function(creatElement, context) {
return creatElement('button', {
on: {
click: function() {
console.log(context)
console.log(context.parent)
console.log(context.props.value)
}
}
}, '点击学习context')
},
props: ['value']
})
var app = new Vue({
el: '#app',
data: {
msg: '父组件的msg'
}
})
</script>
网友评论