Vue render函数认识和使用
2021-07-05 本文已影响0人
飞天小猪_pig
1、认识render函数参数使用
（1）、 render函数的第一个参数
在render函数的方法中，参数必须是createElement。其中createElement的类型是function，这是vue中已经定义好了的。
render函数的第一个参数可以是 String 或 Object |或Function
1、第一个参数是String时
<div id="app">
<my-component></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')
}
})
var app = new Vue({
el: '#app',
data: {
},
})
</script>
2、第一个参数是Object时
Vue.component('my-component',{
render:function(createElement){
return createElement(
{
template:'<div>狗蛋</div>'
}
)
}
})
3、第一个参数是Function时
Vue.component('my-component', {
render: function (createElement) {
var domFun = function () {
return {
template: '<div>翠花</div>'
}
}
return createElement(domFun())
}
})
（2）、 render函数的第二个参数是可选项，只能是Object类型
Vue.component('my-component', {
render: function (createElement) {
return createElement(
{template: '<div>狗蛋</div>'},
{
class:{
foo:true,
far:false,
},
style:{
color:'red',
fontSize:'16px',
},
// 正常HTML特性定义
attrs:{
id:'foo',
src:'http://baidu.com'
},
// 用来写原生DOM的属性
domProps:{
innerHTML:'<span style="color:blue;fontSize:16px">翠花</span>'
}
}
)
}
})
（3）、 render函数的第三个参数可选项，可以是String或Array。代表的是子节点意思
Vue.component('my-component', {
// ----第三个参数是可选的，可以是 String | Array---代表子节点
render: function (createElement) {
return createElement('div',[
createElement('h2','我是翠花'),
createElement('h4','我是狗蛋')
])
}
})
2、this.$slots在render函数中的应用
<div id="app">
<my-component>
<p>天高任鸟飞</p>
<p>海阔任鱼跃</p>
<h2 slot='header'>我是标题2</h2>
<h6 slot='footer'>我是标题6</h6>
</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 //这返回的内容就是含有VNODE的数组
console.log(header) //打印出来header数组类型
var footer=this.$slots.footer
var main=this.$slots.default
return createElement('div',[
createElement('header',header), //这里header是数组，是第三个参数
createElement('main',main),
createElement('footer',footer),
])
}
})
var app = new Vue({
el: '#app',
data: {
},
})
</script>
使用render函数可以对插槽内容进行重新排序，有效减少重绘带来的影响
3、 在render函数中使用props传递数据
<div id="app">
<button @click='switchshow'>点我切换图片</button>--{{show}} <br>
<my-component :show='show'></my-component>
</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/1.jpg'
}else{
imgsrc='img/2.jpg'
}
return createElement('img',{
attrs:{
src:imgsrc
},
style:{
width:'400px',
heigth:'400px'
}
})
}
})
var app = new Vue({
el: '#app',
data: {
show:false
},
methods:{
switchshow:function(){
this.show=!this.show
}
}
})
</script>
4、v-model在render函数中的使用
<div id="app">
<my-component :name='name' @input='showName'></my-component>--{{name}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('my-component', {
props:['name'],
render:function(createElement){
var self=this //this指的就是当前的VUE实例
return createElement('input',{
domProps:{
value:self.name
},
on:{ //事件写在on这里
input:function(event){ //input事件
self.$emit('input',event.target.value)
//input框输入的事件，要拿到值是利用event.target.value
}
}
})
}
})
var app = new Vue({
el: '#app',
data: {
name:'你好'
},
methods:{ //改成下面用v-model这里方法可以省略
showName:function(value){
this.name=value
}
}
})
</script>
在on里面的input函数不是箭头函数，这个this指的是window而不是Vue实例，所以要提前赋值好给self，避免拿的不是Vue实例
需求：将上述例子改成用v-model指令
<my-component :name='name' v-model='name'></my-component>--{{name}}
5、 作用域插槽在render函数中的使用
<div id="app">
<my-component>
<template slot-scope='prop'>
{{prop.text}}
{{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){
//下面相当于 <div> <slot text="text"></slot> </div>
return createElement('div',this.$scopedSlots.default(
{
text:'我是子组件传递来的数据',
msg:'1212'
}
))
}
})
var app = new Vue({
el: '#app',
data: {
},
})
</script>
this.$scopedSlots.default()是作用域插槽提供的方法
6、函数化组件的应用
<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实例无状态，无实例（意思无this）
//通过引入第二参数context拿到上下文的数据，和传递数据
render:function(createElement,context){
return createElement('button',{
on:{
click:function(){
console.log(context)
console.log(context.parent)
console.log(context.parent.msg)
console.log(context.props.value)
}
}
},'点击我学习context')
},
props:['value']
})
var app = new Vue({
el: '#app',
data: {
msg:'我是父组件的数据'
},
})
</script>
以前通过this.text变成了context.props.text才能拿到
以前通过this.$slots.default现在变成context.children才能拿到
