微信小程序双向数据绑定,父子传参

单向绑定语法

1.普通的属性的绑定是单向的。例如：

<input value="{{value}}" />

解析：

如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为leaf；
但如果用户修改了输入框里的值，却不会改变 this.data.value。

双向绑定语法

对应属性前加入model:前缀：

<input model:value="{{value}}" />

用户输入的同时改变 this.data.value

局限性：

与vue相比，暂不支持表达式形式，如下

<input model:value="{{ a.b }}" />
1
 data: {
   a:{b:'hello'}
    }

自定义组件(子组件)向父组件传参数

双向绑定同样可以使用在自定义组件上

自定义组件的js文件，接收父组件传递的数据myValue

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

自定义组件的wxml文件，修改父组件传来的数据myValue

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

父组件中使用自定义组件custom-component

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

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

自定义组件(子组件)还可以这样向父组件传参数

// 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的位置也会被一同更新。