在 minapp 中使用数据双向绑定非常简单,只需要满足如下四个条件:

  • 父子组件都要继承自 BaseComponentBasePage (使用 minapp 框架默认就满足此条件)
  • 组件更新数据时,不要使用 setData,而是使用 setDataSmart (更多详情请参考文档如何在原生的小程中实现数据双向绑定
  • wxml 中绑定数据时使用 .sync 后缀,如 <child childAttr.sync="parentAttr"></child>
  • 使用 @minapp/cli 编译项目(主要是需要 wxml 编译功能)

Example:

  1. // 子组件: toast
  2. import {BaseComponent, comify} from '@minapp/core'
  3. @comify()
  4. export default class extends BaseComponent {
  5. properties = {
  6. visible: {
  7. // 实现双向绑定,不需要在子组件中额外配置
  8. type: Boolean,
  9. value: false
  10. }
  11. }
  12. }
  1. // 父容器
  2. import {BasePage, pagify} from '@minapp/core'
  3. @pagify()
  4. export default class extends BasePage {
  5. data = {
  6. isToastVisible: false
  7. }
  8. toggleToast() {
  9. this.setDataSmart({isToastVisible: !this.data.isToastVisible})
  10. }
  11. }
  1. <!-- 父容器 wxml 模板 -->
  2. <toast visible.sync="isToastVisible" />