vue Render函数进阶

来源：互联网发布：中国历史书籍知乎编辑：程序博客网时间：2024/05/16 01:11

会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶

首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态，对实例中传递的props的“nnum”值得控制可以自如的切换两种状态显示。这样就是和v-if 一样使用组件了

 <div id="app">        <mycom :v="nnum">            <div slot="slot2">hahahhah</div>            <div slot="slot1">ggggggggggggg</div>        </mycom>    </div>    <script>        Vue.component('mycom',{            render:function(createElement){                var s=this;                if(this.v==1){                    return createElement('div',                       {                        domProps:{innerHTML:'component n='+this.n}                       })                }else{                    return createElement('div',                        [this.$slots.slot1,this.$slots.slot2])                }            },            props:{                v:{                    type:Number,                    default:0                },                n:{                    default:'hello'                }            }        });        var app=new Vue({            el:'#app',            data:{                nnum:1            }        })

v-for 的使用需要需要使用到map

 <div id="app">        <mycom :v="nnum" :ar="arr">            <div slot="slot2">hahahhah</div>            <div slot="slot1">ggggggggggggg</div>        </mycom>    </div>    <script>        Vue.component('mycom',{            render:function(createElement){                if(this.v==1){                    return createElement('div',                            this.ar.map(function(item){                                return createElement('li',                                    {                                        domProps:{                                            innerHTML:item                                        }                                    })                            })                       )                }else{                    return createElement('div',                        [this.$slots.slot1,this.$slots.slot2])                }            },            props:{                v:{                    type:Number,                    default:0                },                n:{                    default:'hello'                },                ar:{                    type:Array,                    default:function(){ return [1,23,4,5,6,55,65]}                }            }        });        var app=new Vue({            el:'#app',            data:{                nnum:1,                arr:[1,2,3,4,5,6,7,8]            }        })    </script>    </body>

只有map方法才能检测改变，其他的方法不能根据数据的改变能改变相应的状态

下的例子中的arr数组依靠 apply的方法来实现的就不能够检测this.ar 的变换来重新计算

return createElement('div',
Array.apply(null,this.ar.map(function(item){
return createElement('li',
{
domProps:{
innerHTML:'item'
}
})
}))

<body>    <div id="app">        <mycom :v="nnum" :ar="arr">            <div slot="slot2">hahahhah</div>            <div slot="slot1">ggggggggggggg</div>        </mycom>    </div>    <script>        Vue.component('mycom',{            render:function(createElement){                if(this.v==1){                    return createElement('div',                            this.ar.map(function(item){                                return createElement('li',                                    {                                        domProps:{                                            innerHTML:item                                        }                                    })                            })                       )                }else{                     return createElement('div',                            Array.apply(null,this.ar.map(function(item){                                return createElement('li',                                    {                                        domProps:{                                            innerHTML:'item'                                        }                                    })                            }))                       )                }            },            props:{                v:{                    type:Number,                    default:0                },                n:{                    default:'hello'                },                ar:{                    type:Array,                    default:function(){ return [1,23,4,5,6,55,65]}                }            }        });        var app=new Vue({            el:'#app',            data:{                nnum:2,                arr:[1,2,3,4,5,6,7,8]            }        })    </script>    </body>

v-model 使用domProps来实现双向绑定

使用对value：赋值可以将数据绑定给 input 的默认值，但是对input 的修改并不能传递给vue 这涉及到组件的通信问题，

所以想实现双向绑定，只能自己写事件来出发 vue shu'j的传递

domProps:{
value:self.v
}

<body>    <div id="app">        <mycom :v="nnum" :ar="arr">            <div slot="slot2">hahahhah</div>            <div slot="slot1">ggggggggggggg</div>        </mycom>        <div>{{nnum}}</div>    </div>    <script>        Vue.component('mycom',{            render:function(createElement){                var self=this;                var inp=createElement('input',                                    {                                        domProps:{                                            value:self.v                                        }                                    });                    return createElement('div',[inp])                },            props:{                v:{                    type:Number,                    default:0                },                n:{                    default:'hello'                },                ar:{                    type:Array,                    default:function(){ return [1,23,4,5,6,55,65]}                }            }        });        var app=new Vue({            el:'#app',            data:{                nnum:100,                arr:[1,2,3,4,5,6,7,8]            }        })    </script>    </body>

通过input触发undateValue来更新 app中的nnum 值（差点没转过弯来，render过于复杂后，真的是自己找罪受）

 <div id="app">        <mycom :v="nnum" :ar="arr" @input="updateValue">        </mycom>        <div>{{nnum}}</div>    </div>    <script>        Vue.component('mycom',{            render:function(createElement){                var self=this;                var inp=createElement('input',                                    {                                        domProps:{                                            value:self.v                                        },                                        on:{                                          input:function(event){                                            self.$emit('input',event.target.value)                                          }                                        }                                    });                    return createElement('div',[inp])                },            props:{                v:{                    type:Number,                    default:0                },                n:{                    default:'hello'                },                ar:{                    type:Array,                    default:function(){ return [1,23,4,5,6,55,65]}                }            },            methods:{                update:function(){                }            }        });        var app=new Vue({            el:'#app',            data:{                nnum:100,                arr:[1,2,3,4,5,6,7,8]            },            methods:{                updateValue:function(value){                    this.nnum=parseFloat(value);                }            }        })    </script>    </body>

0 0