微信小程序开发简单双向绑定-加速度jsudo

微信小程序开发简单双向绑定

来源：加速度jsudo

作者

访问量 6371

本文摘要

微信小程序简单双向绑定微信小程序在基础库2.9.3开始支持简单双向绑定，该机制可以帮助开发者方便地完成用户输入与数据的绑定。本文将向您介绍微信小程序中简单双向绑定的语法以及如何在自定义组件中应用。 1. 双向绑定语法在WXML中，普通的属性的绑定是单向的。如果需要在用户输入的同时改变data的值，则需要借助简易双向绑定。此时，在对应项目之前加入model:前缀即可实现双向绑定。在使用input

如果输入框中的内容被修改，那么data中相应的value也会被修改。注意：用于双向绑定的表达式只能是一个单一字段的绑定，不支持含有运算符的表达式，并且目前还不能使用data路径，例如a.b。 2. 在自定义组件中传递双向绑定双向绑定同样可以使用在自定义组件上。我们可以将自定义组件内部的属性与组件外部的属性进行绑定，这样只要在页面调用该组件并传入相应的属性值，那么输入框中的值发生变化的同时，自定义组件内部的属性以及页面中相对应的属性都会发生变化。下面是示例代码：

// custom-component.js
Component({
  properties: {
    myValue: String
  }
})

在使用自定义组件时，我们只需要将页面的data中的属性值传递给组件即可。示例如下：

如果输入框中的内容被修改，那么组件内部的myValue属性值以及页面的pageValue属性值均会相应地更新。 3. 在自定义组件中触发双向绑定更新自定义组件还可以自己触发双向绑定更新。这种情况下，需要使用setData来设置自身的属性值。具体实现，请参见以下代码：

// custom-component.js
Component({
  properties: {
    myValue: String
  },
  methods: {
    update: function() {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

在使用该自定义组件时，我们只需要将页面上data中的属性值传递给组件即可。如下所示：

当组件调用setData更新myValue值时，页面的对应属性值以及WXML中所有绑定了该属性值的位置都会相应地更新。通过简单双向绑定机制，开发者可以轻松完成用户输入与数据的绑定。在实际开发中，我们可以根据业务场景的不同来合理运用简单双向绑定机制，提高开发效率和用户体验。