微信小程序组件和页面数据和事件双相绑定

在做微信小程序的时候, 很多时候会遇到自定义组件, 而组件的使用又会依赖于页面, 因此,在使用时不可避免的会遇到在页面和组件中, 属性和事件双相绑定的情况

1. 数据双相绑定:

    在组件中使用 triggerEvent 方法将页面参数传递过去, 在页面接收时实际上是接受到一个事件; 即

    1). 在组件中调用 this.triggerEvent('passData', this.data);  // passData:为识别的方法名称, 在页面中标识,  this.data为要传递的数据;

    2). 在页面中使用 bind:passData='getData',  passData为上面的事件标识, getData为页面中的方法, 

    3). 在页面的getData方法总就可以获取到组件传递过来的数据和事件了;

在页面中直接设置参数, 在组件的properties方法中定义参数后就可以获取; 即

    1). 在页面中设置参数 result='{{resultIndex}}'; // result为组件中定义的属性名;

    2). 在组件中定义属性 properties: { 

        result:

            { type:Number,// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

             value:0  // 属性默认 初始值（可选），如果未指定则会根据类型选择一个

          },

          }

2. 事件的双相绑定

    组件中的事件传递到页面中,方式同上面组件中的数据传递到页面中;

    页面中的事件传递到组件中;

    1). 在页面中通过selectComponent(id)获取到组件实例, //id为组件在页面中的标识, 如果标识是id="name", 则id可以写成"#name", 标识为class="name", 则id可以写成".name", 否则会出现selectComponent返回的实例为null, 

    2). 通过实例直接执行组件中methods方法列表中的方法;// 1. 要保障此实例执行的方法在methods中存在, 2. 此时执行的方法也可以带参数;