Vue中Render函数里没有与v-model相对应的API,因此若想实现双向的数据绑定需要自己来实现逻辑。

示例

首先来看源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Render函数实现v-model</title>
</head>
<body>
<div id="app">
    <ele></ele>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	// 创建ele组件
    Vue.component('ele', {
        render: function(createElement) {    // render函数
            return createElement('div', [
                createElement('input', {
                    domProps: {
                        value: this.value  // 类似于使用v-bind将data选项中的value变量绑定到input的value属性上
                    },
                    on: {
                        input: function (event) {
                            _this.value = event.target.value;
                        }
                    }
                }),
                createElement('p', 'value: ' + this.value),
                // 创建button按钮用来测试
                createElement('button', {
                    attrs: {
                        type: 'button'
                    },
                    domProps: {
                        innerHTML: 'button'
                    },
                    on: {
                        click: this.handleClick
                    }
                })
            ])
        },
        data: function () {
            return {
                value: ''
            }
        },
        methods: {
            handleClick: function () {
                this.value = "按下button时会变成我"
            }
        }
    });

    var app = new Vue({
        el: '#app'
    });
</script>
</body>
</html>

运行后可以看到,输入框的数据和组件中的value,任何一方的变化都会引起另一方的变化,因此实现了双向数据绑定。

解释

事实上,v-model就是prop: valueevent: input组合使用的一个语法糖,虽然在Render函数里写起来比较复杂,但是可以自由控制,更深入底层。

  • 在上面程序中,第20行的domProps: { value: this.value }就类似于使用v-bind将data选项中的value变量绑定到input的value属性上,这样组件中data选项的value变量发生变化时会引起input.value的变化。
  • input中的on选项对input事件的处理_this.value = event.target.value;起到了当输入框数据变化时同步到组件data选项中value变量的的效果。
Logo

前往低代码交流专区

更多推荐