微信小程序简单双向绑定(2)-木庄网络博客

2.目前，尚不能 data 路径，如

<input model:value="{{ a.b }}" />

这样的表达式目前暂不支持。

在自定义组件中传递双向绑定

双向绑定同样可以使用在自定义组件上。如下的自定义组件：

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

<!-- custom-component.wxml -->
<input model:value="{{myValue}}" />

这个自定义组件将自身的 myValue 属性双向绑定到了组件内输入框的 value 属性上。这样，如果页面这样使用这个组件：

<custom-component model:my-value="{{pageValue}}" />

当输入框的值变更时，自定义组件的 myValue 属性会同时变更，这样，页面的 this.data.pageValue 也会同时变更，页面 WXML 中所有绑定了 pageValue 的位置也会被一同更新。

在自定义组件中触发双向绑定更新

自定义组件还可以自己触发双向绑定更新，做法就是：使用 setData 设置自身的属性。例如：

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


如果页面这样使用这个组件：
<custom-component model:my-value="{{pageValue}}" />


当组件使用 setData 更新 myValue 时，页面的 this.data.pageValue 也会同时变更，页面 WXML 中所有绑定了 pageValue 的位置也会被一同更新。

标签：微信小程序

返回前面的内容

相关阅读 >>

sdk数据库 transaction

微信小程序语句

微信小程序云开发sdk文档微信支付下载对账单

微信小程序云开发api 替换更新一条记录

微信小程序工具代码托管

微信小程序小程序使用onpathupdate

微信小程序api 绘图stroketext

微信小程序云开发 api数据库导入

微信小程序小程序协同工作和发布