小程序父子组件之间的通信以及实时触发子组件数据更新

前言

小程序父子组件直接的通信以及实时触发子组件数据更新

  1. WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据
  2. 事件:用于子组件向父组件传递数据,可以传递任意数据。
  3. 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
  4. 子组件使用observers做数据监听,可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 2.6.1 开始支持。

一、父组件传递给子组件传值

<!--父组件 wxml-->
<launch id="launch" info="{{staffInfo}}"></launch>

<!--父组件 js-->
this.setdata({   // 必须使用this.setData()赋值
    staffInfo: 'xxx',
})

<!-- 子组件接收 -->
properties: {
    info: {
        type: String,   // 数据类型校验
        value: '',      // 默认字符串
    }
}

一般情况下如果中的变量没有涉及到更改view试图,不建议使用this.setData()赋值,直接使用this.data.xx = xx;有利于小程序性能,但是和页面有交互的变量必须使用this.setData(),包括给子组件传值

二、子组件传值给父组件

<!-- 子组件-->
this.triggerEvent('customevent', { callBack: 'partake' })  // custoevent: 事件, {}中的内容是给父组件穿的值

<!-- 父页面-->
<launch id="launch" bindcustomevent="fetActiveDetail"></launch>

<!-- 父页面js-->
fetActiveDetail(call) {}   // call子组件传递上来的数据

三、父组件直接获取子组件数据

这里我们需要给子组件设置一个id,使用this.selectComponent,这里我们只讨论该方法,自定义组件使用方法还有很多,具体可以参考这里,熟读文档还是很有必要的。

this.selectComponent('#launch')  // 获取的值可以参看下图
image

这样父组件就拿到了子组件的所有属性,和方法了。想获取子组件什么直接用。看起来很方便

四、子组件使用observers做数据监听,根据父组件动态数据实时更新子组件UI

<!-- 子组件 -->

// 写法一:可以监听多个属性
observers: {
    'canvasUrl'(data){  // canvasUrl: 父组件传递过来的值
      console.log('路径变化了')
    }
  },
data: {
    name: "partake",
},

// 写法二:只监听单个属性
properties: {
    canvasUrl: {
      type: String,
      value: '',
      observer(nv, ov, path) {
        if (nv) {
          this.setData({
            img: nv
          })
        }
      }
    },
},

这种模式下,父组件数据更新,子组件也跟着变化

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,427评论 0 9
  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,438评论 0 0
  • 1、 添加依赖 2、在Application中对PatchManager进行初始化(PS:别忘了在清单文件中注册)...
    cutlass阅读 799评论 0 4
  • 不会美好过程不缺美好 没有眼泪上心隐藏笑意 不会温婉做爱总有好处 未来 还会等你
    蓝山战长岭阅读 264评论 0 0
  • 1.清晨醒来继续听 白话史记 赵世家。谢谢,谢谢,谢谢! 2.组长代我去两个代表团了解情况。谢谢,谢谢,谢谢! 3...
    ZZY710910阅读 68评论 0 0