# 一、简易双向绑定
思考?
兄弟组件间传值 🤔
# 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 简介
![](https://blog-cloudbed.oss-cn-chengdu.aliyuncs.com/note-taking/20220924181828.png)
官方文档:
# 2、小程序与 MobX
在小程序中,已经支持 MobX 这个辅助模块的。(小程序中 npm 包下载是有条件的 😭)
官方文档:
# 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 的字段
}
}
})