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

最新推荐文章于 2024-06-07 11:23:43 发布

yubinCloud

最新推荐文章于 2024-06-07 11:23:43 发布

阅读量9.8k

点赞数 4

分类专栏： Front End 文章标签： vue

本文链接：https://blog.csdn.net/qq_45668004/article/details/111414309

版权

Front End 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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变量的的效果。

yubinCloud

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
【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><body><div id="app">
复制链接

扫一扫