新建一个目录，新建Component,自定义组件下的js文件中有properties,data,methods三个对象

properties：组件的属性列表

data：组件初始数据

methods：组件的方法列表

在其他页面局部注册组件

  • 在其他页面json文件下 配置 "usingComponents": { "my-compoent":'url' }
  • 在wxml下使用<my-compoent></my-compoent>

全局注册即在app.json下配置，在任何页面下都能使用自定义组件了

动态修改自定义组件类名

在A页面下绑定类名class="{{color}}"

在自定义组件js文件下properties中定义

 properties:{
      color:{
       type:String,
       value:"red",
       observer: function(res){
           
           console.log(res,'发生改变')
           //监听当前值是否改变
       }
     }
 }

再引入该组件的页面

<my-component color="{{green}}"></component>
 //这样就将类名改变了，也可以在这个页面绑定一个方法，点击改变类名
 //做到面向对象
赏

爬。