微信小程序---自定义组件

1 新建一个 mnum.wxml

  1.1 编写结构

   <view class="pressBtn" id="view">

              {{magicNumber}}

               <text id="text" style="color:'#ccc';" catch:tap="onTap">点按我可以打印信息                      </text>

    </view>

2新建一个 mnum.wxss

2.1 编写样式

.pressBtn{

          padding-top: 50rpx;

                 background: rgb(91, 65, 170);

      width:375rpx;

}

3新建一个mnum.json  说明这是一个组件

 {

        "component":true

}    

4新建一个mnum.js   编写这个方法

Component({

 

})

*********************************************************************************************************

5   组件的使用

要调用这的组件的json文件中   

 

"usingComponents": {

      "magic-number":"/pages/magicNumber/mnum"

}

//magic-number 组件的名称

///pages/magicNumber/mnum   组件的路径

要调用这的组件的wxml文件中   

<magic-number></magic-number>

************************************************************************************************

自定义组件的事件和方法

mnum.js中  事件得写在methods这个属性中

 

Component({

  data: {

     magicNumber: Math.random()

   },

      methods: {

             onTap: function(e) {

                  console.log(e);

              this.setData({

                   m agicNumber: Math.random()        

              });

                 }

      },

});

********************************************************************************

自定义组件传值给  父组件

组件中

onTap: function(e) {

                 console.log(e);

           this.setData({

           magicNumber: Math.random()

          });

    this.triggerEvent("getMagicnumber",this.data.magicNumber)

}

父组件中wxml引用组件的地方

<magic-number bind:getMagicnumber="onGetMagicnumber"></magic-number>

 

父组件的js文件中写onGetMagicnumber  这个方法

onGetMagicnumber:function(magicNumber){

    this.setData({

                  num: Math.floor( magicNumber.detail*1000)

          })

}

********************************************************************************

********************************************************************************

传值给组件  自定义组件的生命周期函数

 

Component({

        data: {

                  magicNumber: Math.random()

     },

         methods: {           

                  onTap: function(e) {

                  console.log(e);

      this.setData({

         magicNumber: Math.random()

         });

                  this.triggerEvent("getMagicnumber",this.data.magicNumber)

        }

        },

       attached(){ //生命周期函数

               }

});

 

**********************************************************************

index.wxml中  传值使用 横杠

<magic-number bind:getMagicnumber="onGetMagicnumber"   now-in="Index"></magic-number>

 

Component({

          properties:{

                       nowIn:String

           }        ,

      data: {

                       magicNumber: Math.random()

             },

       methods: {

               onTap: function(e) {

                console.log(e); 

             this.setData({

                   magicNumber: Math.random()

                          });

           this.triggerEvent("getMagicnumber",this.data.magicNumber)

        }

      },

         attached(){

                     console.log(this.data.nowIn)

                     this.triggerEvent("getMagicnumber",this.data.magicNumber)

      }

});

组件中使用 mnum.wxml中 驼峰式 nowIn  直接使用

<view>{{nowIn}}</view>

**********************************************************************