vue Render函数进阶

v折耳

37574人浏览 · 2017-01-10 18:41:41

v折耳 · 2017-01-10 18:41:41 发布

会使用基本的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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^