一、简易双向绑定

思考？

兄弟组件间传值 🤔

1、小程序页面中

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

① 简单示例

• 单向

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

• 双向

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

② 注意事项

双向绑定的表达式只能是一个单一字段的绑定，并且不然识别 data 路径

• 错误示例

<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />

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

2、自定义组件中

  在自定义组件中，也可以实现数据的双向绑定。

① 简单示例

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

  methods: {
    update: function () {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

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

② 父组件/页面调用 🚩

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

二、Mobx

  全局数据共享（又称：状态管理）是为了解决组件间数据共享问题而出现的。

开发中常用的全局共享方案有：Vuex、Redux、MobX 等

1、MobX 简介

官方文档：

Mobx (opens new window)

2、小程序与 MobX

  在小程序中，已经支持 MobX 这个辅助模块的。（小程序中 npm 包下载是有条件的 😭）

官方文档：

mobx-miniprogram (opens new window)的使用

3、MobX 辅助模块使用

① 下载：

npm install --save mobx-miniprogram mobx-miniprogram-bindings

② 创建 MobX 的 Store 示例

• Store/store.js

import { observable, action } from 'mobx-miniprogram'

export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,

  // 计算属性
  get sum() {
    return this.numA + this.numB
  },

  // actions（修改✨数据）
  updateNumb1: action(function (step) {
    this.numA += step
  }),

  updateNumb2: action(function (step) {
    this.numB += step
  })
})

③ 使用

  在使用前提前解释一下，fields中可以映射数据、计算属性，在actions可以映射方法。

• 页面中（手工绑定）

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'

Page({
  data: {
    someData: '...'
  },
  onLoad() {
    // 1、绑定
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['update']
    })
  },
  onUnload() {
    // 2、解绑
    this.storeBindings.destroyStoreBindings()
  },
  myMethod() {
    this.data.sum // 来自于 MobX store 的字段
  }
})

如果小程序基础库版本在 2.9.2 以上，页面中使用 MobX 也可以直接像下面 Component 构造器那样引入 behaviors 。

• 组件中（behavior 绑定）🚩

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'

Component({
  behaviors: [storeBindingsBehavior],
  data: {
    someData: '...'
  },
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: 'sum'
    },
    actions: {
      buttonTap: 'update'
    }
  },
  methods: {
    myMethod() {
      this.data.sum // 来自于 MobX store 的字段
    }
  }
})