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

最新推荐文章于 2025-05-29 09:16:57 发布

原创最新推荐文章于 2025-05-29 09:16:57 发布 · 1.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #createElement

vue 专栏收录该内容

17 篇文章

订阅专栏

本文探讨在Vue中如何使用render函数的createElement创建可双向绑定的input元素。通过props和domProps的区别介绍，详细解释了如何实现双向绑定，并通过实例代码展示了其工作原理。在实践中，发现使用attrs无法实现特定情况下的双向绑定，而改用domProps则能解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、前言

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

二、使用

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

        Vue.component("input_render_demo", {
            props: ['value'],
            // template: `
            // <input type="text" v-bind:value="value" />
            // `
            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就可以实现双向绑定了。

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

 <div id="input_render_demo">
            <input type="text" v-model="value" placeholder="input" />
            <span>{{value}}</span>
            <input_render_demo v-model="value"></input_render_demo>
        </div>

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

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

三、结论

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