微信小程序 双向绑定

注意事项

基础库 2.9.3 开始支持双向绑定

普通属性绑定示例

页面 WXML

<!-- 在页面中，提供修改数据的方法 -->
<view bind:tap="onTap">{{ msg }}</view>
<!-- 普通属性绑定 -->
<input type="text" value="{{ msg }}" />

页面 JS

Page({
  data: {
    msg: 'Hello world!'
  },

  onTap() {
    this.setData({ msg: this.data.msg + '!' })
  }
})

• 当点击 view 时，msg 发生变化，input 的内容会同时改变
• 当在 input 中进行输入，msg 并不会同时改变

使用 model: 前缀进行双向绑定

页面 WXML

<!-- 在页面中，提供修改数据的方法 -->
<view bind:tap="onTap">{{ msg }}</view>
<!-- 双向绑定 -->
<input type="text" model:value="{{ msg }}" />

页面 JS

Page({
  data: {
    msg: 'Hello world!'
  }
})

• 此时当在 input 中进行输入，msg 会同时改变，并且 view 的显示内容也会更新

自定义组件和双向绑定

页面包含一个自定义组件 component, 自定义组件包含一个内置组件 input

页面 WXML

<!-- 在页面中，提供修改数据的方法 -->
<view bind:tap="onTap">{{ msg }}</view>
<!-- component 是自定义组件，页面和自定义组件进行双向绑定 -->
<component model:component-value="{{ msg }}" />

页面 JS

Page({
  data: {
    msg: 'Hello world!'
  },

  onTap() {
    this.setData({ msg: this.data.msg + '!' })
  }
})

自定义组件 WXML

<!-- 自定义组件和 input 进行双向绑定 -->
<input type="text" model:value="{{ componentValue }}" />
<!-- 在自定义组件中，提供修改数据的方法 -->
<button bind:tap="modifyValue">修改 componentValue</button>

自定义组件 JS

Component({
  properties: {
    componentValue: String
  },

  observers: {
    componentValue: (newVal) => {
      // 监听 componentValue 的变化
      console.log(`componentValue 发生变化：${newVal}`)
    }
  },

  methods: {
    modifyValue() {
      // 在自定义组件中，使用 setData 修改数据，可以触发双向绑定更新
      this.setData({ componentValue: this.data.componentValue + '!' })
    }
  }
})

• 页面和自定义组件进行双向绑定
• 自定义组件和内置组件（input）进行双向绑定
• 此时，当在页面修改 msg, 在自定义组件修改 componentValue, 在 input 中修改 value (在 input 中进行输入)，其他位置的数据也会跟着发生变化
• 只要数据发生变化，自定义组件的 observers 就能监听到