详解微信小程序中数据双向绑定如何实现

作者：阿沐时间：2026-10-30 19:38:46浏览：121

本文详细解析微信小程序中数据双向绑定的两种实现方式。首先介绍通过 input 的 bindinput 事件结合 setData 手动同步数据的方法，并建议合理使用 bindblur 以优化性能。其次讲解官方推荐的 model:value 语法糖，展示其简化代码的优势。通过对比两种方案的 WXML、TS 及 WXSS 代码，帮助开发者根据实际需求选择合适的数据同步策略。

前言

官方文档：微信小程序双向绑定语法

在 WXML 中，普通的属性绑定默认是单向的。例如：

<input value="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{value}}" />

若使用 this.setData({ value: ‘leaf’ }) 更新 value，this.data.value 与输入框显示的值均会更新为 leaf；但若用户修改输入框内容，this.data.value 却不会随之改变。

若需在用户输入时同步更新 this.data.value，可借助简易双向绑定机制。此时，在对应属性前添加 model: 前缀即可：

<input model:value="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{value}}" />

如此，当输入框值改变时，this.data.value 会同步更新。同时，WXML 中所有绑定 value 的位置也会一同刷新，数据监听器也能正常触发。

一、通过 input 的 bindinput 事件实现

此处建议将 bindinput 替换为 bindblur，在输入框失去焦点时再进行赋值操作。

官方解释指出：每次 setData 都会触发逻辑层虚拟 DOM 树的遍历与更新，这可能导致触发一次完整的页面渲染流程。

合理使用 setData 官方文档

WXML 代码

<view class="my-page">
  <form catchsubmit="formSubmit">
    <view class="form-item">
      <view class="form-label">昵称</view>
      <view class="form-input">
        <input type="text" value="{{ form.nickName }}" data-prop="form.nickName" bindinput="BindInput" placeholder="请输入昵称" />
      </view>
    </view>
    <view class="form-item">
      <view class="form-label">简介</view>
      <view class="form-input">
        <input type="text" value="{{ form.introduce }}" data-prop="form.introduce" bindinput="BindInput" placeholder="请输入简介" />
      </view>
    </view>
    <view class="btn-area">
      <button style="margin: 30rpx auto" type="primary" formType="submit">Submit</button>
    </view>
  </form>
</view>

TS 代码

Page({
  data: {
    form: {
      nickName: ''
    }
  },
  onLoad() { },
  onReady() { },
  formSubmit() {
    console.log(this.data.form)
  },
  BindInput(e: any) {
    this.setData({
      [`${e.currentTarget.dataset.prop}`]: e.detail.value
    })
  }
})

输出结果

二、通过 model:value 实现

WXML 代码

<view class="my-page">
  <form catchsubmit="formSubmit">
    <view class="form-item">
      <view class="form-label">昵称</view>
      <view class="form-input">
        <input name="nickName" type="text" model:value="{{ form.nickName }}" placeholder="请输入昵称" />
      </view>
    </view>
    <view class="form-item">
      <view class="form-label">简介</view>
      <view class="form-input">
        <input name="introduce" type="text" model:value="{{ form.introduce }}" placeholder="请输入简介" />
      </view>
    </view>
    <view class="btn-area">
      <button style="margin: 30rpx auto" type="primary" formType="submit">Submit</button>
    </view>
  </form>
</view>

TS 代码

Page({
  data: {
    form: {
      nickName: '',
      introduce: '',
    },
  },
  onLoad() { },
  onReady() { },
  formSubmit(e: any) {
    this.setData({
      form: e.detail.value
    })
    console.log(this.data.form);
  },
})

输出结果

WXSS 代码

.my-page {
  padding: 30rpx;
}
.form-item {
  display: flex;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #eee;
}
.form-item .form-label {
  height: 100%;
  width: 180rpx;
  text-align: center;
}
.form-item .form-input {
  width: calc(100% - 180rpx);
}
.form-item .form-input input {
  width: 100%;
  height: 80rpx;
}

总结

到此这篇关于微信小程序中数据双向绑定如何实现的文章就介绍到这了,更多相关微信小程序数据双向绑定内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

为什么叫JavaScript：语言命名由来及与Java的历史渊源

2026-11-05 11:37:48

JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH：mm：ss

2026-11-04 21:25:21

不同语言间JS与Java/Python加密结果不一致怎么办

2026-11-04 18:27:23

Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法

2026-11-04 08:13:59

JS怎么获取当前日期并格式化为YYYY-MM-DD

2026-11-03 18:47:03