# 一、简易双向绑定

思考?

兄弟组件间传值 🤔

# 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 的字段
    }
  }
})
更新于 : 7/8/2024, 10:21:14 AM