小程序自定义组件总结-小程序自定义组件意义-微信小程序组件开发-即速应用

小程序自定义组件总结-小程序自定义组件意义-微信小程序组件开发

浏览量：2485 时间：2020-04-06 来源：小曲曲

1、创建子组件并引入使用2、父页面向子组件传值父页面中组件标签上直接写需要传递的值zannum"{{number}}"/子组件的js中properties接收Component({properties:{num:Number，min:{type:Number,类型value:0,初始值可省略observer:function(newVal,oldVal){//属性值变化时执行可省略}},}）子组件页面中可以像data一样使用textclass'num'{{num}}/text3、组件的自定义事件例如有一个点赞的子组件，如果每个页面引入的逻辑一模一样，可以将js写在子组件的js中若每个点赞组件的逻辑不通，只是样式和部分逻辑相同，例如点击变色，数值加一，但是一个事商品点赞，一个事店铺点赞，就会出现接口不同，此时js逻辑不同的部分就需要写在父组件中，所以使用自定义事件1.
使用方法1、子组件的点击事件2、点击事件里注册自定义事件this.triggerEvent(“myevent”,{data:‘子组件像父组件传递的参数’});3、在父组件引入的子组件标签上绑定自定义事件4、父组件就可以在方法里写自己的逻辑e.detail就是子组件传递过来的参数
组件和页面的区别2.
1、点击一个文件夹右键——新建Page、新建Component2、组件的js文件
Component({properties:{//父组件传过来的datanum:Number,flag:Boolean},/***页面的初始数据*/data:{},methods:{//组件的方法要写在methods中jia(e){letaif(this.properties.flag){a-1;}else{a1;}this.setData({flag:!this.properties.flag,num:this.properties.num+a})}},3.
3、页面的js文件
Page({data:{flag:false,number:1,motto:'HelloWorld',},//事件处理函数,直接作为参数bindViewTap:function(){wx.navigateTo({url:'../logs/logs'})},}）