【Vue】在Render函数中实现v-model的数据双向绑定效果

Vue中Render函数里没有与v-model相对应的API，因此若想实现双向的数据绑定需要自己来实现逻辑。首先来看源代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Render函数实现v-model</title></head&g

yubinCloud

10526人浏览 · 2020-12-20 10:23:11

yubinCloud · 2020-12-20 10:23:11 发布

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: value和event: 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变量的的效果。

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}$/, //不连续的两位字母// /^