小程序自定义组件以及页面之间的数据传递

1、自定义组件接收页面传递过来的数据

首先在组件的属性列表properties中设置数据类型以及默认值,然后再在引用组件的页面上设置相应的接收数据的名字以及数据内容(跟小程序本身页面数据渲染一样的写法)

组件中以下代码
properties:{
    isShow:{
    type:Boolean,
    value:false,
  }
}
页面中以下代码
<my-component  isShow="{{pageBoolean}}" ></my-component>
data:{
   pageBoolean:true,
}

2、数据从自定义组件传递到页面

在组件中使用下面代码
this.triggerEvent('okEvent', {data}) 
页面中使用下面代码
<my-component bind:okEvent="myEvent" ></my-component>

methods:function(){
    myEvent(e){
      this.setData({
        data:e.detail.data
    })
  }
}
posted @ 2022-11-08 09:07  SultanST  阅读(21)  评论(0编辑  收藏  举报