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

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

作者: 404_accc | 来源:发表于2019-10-31 19:25 被阅读0次

    前言

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

    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
              })
            }
          }
        },
    },
    

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/ucotbctx.html