vue渲染函数使用createElement创建可双向绑定的input

昨天晚上开始看官方文档的渲染函数这一节。看完后，对createElement的使用还是懵懵懂懂的，只好动动手，再查查资料，总算有些收获。

一、前言

对于createElement这个函数的第二个参数，一定要弄清楚attrs，props，domProps这3个属性的用法，什么时候用。今天说的可双向绑定的input，就用到了domProps。

二、使用

首先定义一个input组件，如下所示：

        Vue.component("input_render_demo", {
            props: ['value'],
            // template: `
            // 
            // `
            render: function (createElement) {
                var self = this
                return createElement('input', {
                    domProps: {
                        value: self.value,
                        type: "text"
                    },
                    on: {
                        input: function (event) {
                            self.$emit('input', event.target.value)
                        }
                    }
                })
            }
        })

通过props: ['value'] 来接收父组件传值，然后使用input事件实现向外面传值出去。这样使用v-model就可以实现双向绑定了。

通过下面的示例代码就可以清楚的观察双向绑定的效果了 

 

            
            {{value}}
            
        

new Vue({
                el: "#input_render_demo"
                ,data:{
                    value: "render input"
                }
            })

小插曲：在做这个示例验证过程中，我刚开始没有使用domProps而是用的attrs，结果刚开始时双向绑定功能没什么问题。当我把内部自定义组件input的内容清空后，再在外面的input组件输入内容后，内部的input的内容没有实时更新了。最后我换成了domProps后就正常工作了。

三、结论

官网的文档，有的知识点说的很浅，有的是翻译的和原文相差甚远，对于初学者有时候会莫名其妙，这时候就要多动手，多查资料，才能真正的明白。