专栏首页天天微信小程序 页面与自定义组件数据通信

微信小程序 页面与自定义组件数据通信

先看官方文档

组件间通信

组件间的基本通信方式有以下几种。

  • WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。
  • 事件:用于子组件向父组件传递数据,可以传递任意数据。
  • 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
1. 页面向自定义组件传递数据(类似vue的props)

看官方示例

<!-- 页面的 json -->
{
  "usingComponents": {
    "my-component": "/components/custom-component"
  }
}

<!-- 页面的 WXML -->
<my-component my-property="example" />
<my-component my-property="{{msg}}" />

<!-- 页面的 js -->
const app = getApp()

Page({
  data: {
    msg:'hello wechar'
  },
  onLoad: function () {
   
  },
})



<!-- 组件 custom-component.wxml -->
<custom-component>
  <view>{{myProperty}}</view>
  <button bindtap='onMyButtonTap'>Button</button>
  <view>{{A[0].B}}</view>
  <button bindtap='_myPrivateMethod'>_myPrivateMethod</button>
</custom-component>


<!-- 组件 custom-component.json-->
Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal) { } // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
    },
    myProperty2: String // 简化的定义方式
  },
  data: {
    A: [{
      B: 'init data.A[0].B'
    }]
  }, // 私有数据,可用于模版渲染

  lifetimes: {
    // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
         myProperty: 'Test',
        'A[0].B':'hello world' //改变数组和对象的属性值有点不一样
      })
    },
    _myPrivateMethod: function () {
      // 内部方法建议以下划线开头
      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
      this.applyDataUpdates()
    },
    _propertyChange: function (newVal, oldVal) {

    }
  }

})

说明:页面通过my-property讲example字符串传递给自定义组件,同样也可以使用数据绑定的方法

image.png

2.组件改变自身数据

代码示例同上,在子组件中的methods中定义方法,通过this.setData({})改变

 methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
        myProperty: 'Test',
        'A[0].B':'hello world' //改变数组和对象的属性值有点不一样
      })
    },
}

3自定义组件改变页面的数据(类似vue中的this.$emit())

<!-- index.wxml-->
<text>{{msg}}</text>
<my-component my-property="{{txt}}" bindmyevent='change'/>

<!-- index.js-->
const app = getApp()

Page({
  data: {
    msg:'hello wechar',
    txt:'我们不一样'
  },
  onLoad: function () {
   
  },
  change:function(e){
    console.log(e.detail);
    this.setData({
      msg:e.detail.val
    })
    
  }
})

<!-- 组件 custom-component.wxml -->
<custom-component>
  <view>{{myProperty}}</view>
  <button bindtap='onMyButtonTap'>Button</button>
  <view>{{A[0].B}}</view>
  <button bindtap='_myPrivateMethod'>_myPrivateMethod</button>
  <button bindtap='changeParentData'>向父组件传值</button>
</custom-component>


<!-- 组件 custom-component.js -->
Component({
  behaviors: [],
  properties: {
    myProperty: { 
      type: String, 
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  data: {
  }, // 私有数据,可用于模版渲染
    ...
  methods: {
    ...
    changeParentData:function(){
      var myEventDetail = {
        val:'您好'
      } // detail对象,提供给事件监听函数
      var myEventOption = {
        
      } // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption);
  
    //这样通过事件将参数 传递给被监听 函数 从而实现通信
    }
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序 页面与自定义组件数据通信

    说明:页面通过my-property讲example字符串传递给自定义组件,同样也可以使用数据绑定的方法

    天天_哥
  • 面向对象编程的思想

    天天_哥
  • DOM操作(20171027)

    天天_哥
  • 事件的add几种方式

    贵哥的编程之路
  • 63. Vue MUI的基本使用

    MUI 并不能使用 npm 去下载,需要自己手动从 github 上,下载现成的包,自己解压出来,然后手动拷贝到项目中使用;

    Devops海洋的渔夫
  • Jquery中的done() fail() then() $when()到底是什么

    有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。

    Daotin
  • 论文简述 | CamVox: 一种低成本、高精度的激光雷达辅助视觉SLAM系统

    将激光雷达与基于相机的同步定位和建图(SLAM)相结合是提高整体精度的有效方法,尤其是在大规模室外场景下.低成本激光雷达(如Livox激光雷达)的最新发展使我们...

    3D视觉工坊
  • 使用ntopng和InfluxDB实现容器和网络可见性

    舒徐一段时间以来,我们一直在研究如何以一种简单有效的方式将系统监控和网络监控结合起来。2014年,我们对Sysdig进行了一些实验,最近,由于有了eBPF,我们...

    虹科网络可视化与安全
  • 使用Flex Gateway V**将数据迁移到腾讯云

    Hunter
  • 科技的七年之痒,七年后这些东西将会消失!

    · 像闹钟、座机、计算器、数码相机这种功能特别单一的设备会被智能手机取代 · 像传统牙刷、扫帚等生活工具会被机械化的电动牙刷、扫地机器人等取代 · 充电线、有线...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券