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

先看官方文档

组件间通信

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

  • 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字符串传递给自定义组件,同样也可以使用数据绑定的方法

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);
  
    //这样通过事件将参数 传递给被监听 函数 从而实现通信
    }
  }
})

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mySoul

js 和 css动画

使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码。这是其原理。

28060
来自专栏流浪猫的golang

golang slice 与list 的性能分析。

本机运行结果: 声明:测试结果为个人电脑的测试结果,仅供参考。 slice 创建速度:1.3029245s list 创建速度: 9.7489181...

17310
来自专栏Java后端技术

获得同级iframe页面的指定ID元素的几种实现方法

注:window.frames("iframe的name")、document.frames("iframe的name")和window.frames["ifr...

17520
来自专栏十月梦想

Vue入门详解之模板语法插值表达式,v-html和v-text

我们来看一下简单的模板语法,在Vue中有三种模板语法用来渲染model(数据层),插值表达式(就是{{}},双花括号表达法),v-text和v-html三种!那...

59230
来自专栏Android先生

Android开发人员不得不学习的JavaScript基础(二)

window对象是BOM的核心,window对象指当前的浏览器窗口,window对象中有很多种方法供开发者调用:

11330
来自专栏菜鸟计划

vue组件详解(二)——使用props传递数据

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是...

1.1K80
来自专栏冷冷

Jquery 获取checkbox属性checked为undefined和改变状态 值不变

API: As of jQuery 1.6, the .attr() method returns undefined for attributes that ...

24360
来自专栏HTML5学堂

JS简单页面交互实战 - 点击按钮实现求和功能

上一期堡堡给大家讲解了简单的页面交互效果 - 点击块,让块动起来,让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块,让块动起来,可以回复“交互”到...

55480
来自专栏移动开发面面观

React Native的props

13730
来自专栏软件开发

前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

一、条件渲染 1.1、v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if...

543110

扫码关注云+社区

领取腾讯云代金券