小程序之组件

一、父组件传给子组件 1.在component目录中创建testcomponent文件    在testcomponent.wxml中写结构       <view bindtap='clickEvent' data-age='{{age}}'>{{age}}</view> 可以看出页面中写了个绑定函数，在testcomponent.js中调用它   首先定义一个属性列表和属性的方法      Component({   /**    * 组件的属性列表    */   properties: {     age:{       type:Number,       value:12     }   },     /**    * 组件的初始数据    */   data: {     },     /**    * 组件的方法列表    */   methods: {     clickEvent(e){       console.log(e);         this.triggerEvent('click',e.currentTarget.dataset.age)       父和子之间使用triggerEvent进行传递 组件间通信与事件。可点击这个查看详细介绍     }   } }) 2.引用组件       引入的文件。首先在引用文件的json文件夹中引入路径并定义好组件的名称。 如下。 //demo.json     {   "usingComponents":{     "test":"/component/testcomponent/testcomponent"   } }     在demo.wxml使用组件     <!-- 通过test组件把age的值传到组件目录中，再为它绑定一个事件 -->     <test age="23" bindclick="clickEvent"></test>      demo.js    Page({       data:{          age:2        //定义age为2，把2传到页面组件中，再通过页面组件传到组件目录中，最后显示出来    }, clickEvent(e){    console.log('123')  }   }) 页面的初始值为12，通过传递给父组件，值由12变为23。从下图可以看出会同时触发testcomponent和demo里面的方法                 二、子组件传给父组件 父组件中的内容都一样，就不叙述了。      Component({   /**    * 组件的属性列表    */   properties: {     age:{       type:Number,       value:12     }   },     /**    * 组件的初始数据    */   data: {     },     /**    * 组件的方法列表    */   methods: {     clickEvent(e){         console.log(e);          this.triggerEvent('click',e.currentTarget.dataset.age)     }   } })    子组件的内容 demo.wxml   <test age="{{age}}" bindclick="saveEvent"></test>   demo.js Page({   data:{      age:20      //子组件中的值   },   clickEvent(e){    console.log(e.detail) }, saveEvent({detail}){     console.log('123'); } }) 传给父组件之后值由12变为20。   定义事件。如下 Page({   data:{      age:20   },   clickEvent(e){    this.setData({       age:detail + 1    }) }, //  父的参数传给子组件 saveEvent({detail}){    console.log(detail)   this.setData({     age:detail + 1   }) } }) 如下：点击之后由20变为21   完整代码：    父组件代码       .wxml代码 <!-- 使用data接收子组件传来的数据 --> <view bindtap='clickEvent' data-age='{{age}}'>{{age}}</view>   .js代码 // component/testcomponent/testcomponent.js Component({   /**    * 组件的属性列表    */   properties: {     age:{       type:Number,       value:12     }   },     /**    * 组件的初始数据    */   data: {     },     /**    * 组件的方法列表    */   methods: {     clickEvent(e){       console.log(e);       this.triggerEvent('click',e.currentTarget.dataset.age)     }   } }) 子组件代码：  引入父组件的路径并定义一个组件 .json文件     {   "usingComponents":{     "test":"/component/testcomponent/testcomponent"   } }     .wxml文件    <!-- 通过test组件把age的值传到组件目录中，再为它绑定一个事件 --> 　　<!-- 父的事件 --> 　　<test age="23" bindclick='clickEvent'></test> 　　<!--子的事件 --> 　　<test age="{{age}}"  bindclick="saveEvent"></test>   .js文件   Page({   data:{      age:20   },   clickEvent(e){       console.log(e.detail) },     saveEvent({detail}){    console.log(detail)   this.setData({     age:detail + 1   }) } })

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄