小程序自定义组件方式

自定义组件

1.定义
首先，我们要明确，自定义组件不是创建page，而是创建component，一个小程序组件==（wxml,wxss,js,json)==
2.命名
组件名.js
3.创建

Component({ //构造一个组件
  
  properties:{ //组件的属性列表
    title:{ //属性名
      type:String,//类型
      value: '默认值'
    }
  }
  
  data:{ //组件数据
  	msg:'..'
	}
          
  methods:{ //组件方法
    show(){
  		this.data.msg/this.properties.title
  		this.setData({msg:...}) // properties 不可修改
		}
  }
})

4.注册
全局注册 app.json , 到处可用(page,component)

"usingComponents":{
  "使用时的组件名":"components/comp1/comp1"
}

局部注册 pagename.json ，当前页面可以:
“usingComponents”:{…}
组件内注册组件, 当前组件可用:
“usingComponents”:{…}
5.使用

<comp1 title="{{值}}"></comp1>

注意：组件样式，推荐只使用class，组件样式是局部的，与外界隔离(scoped)
接受外部传入样式

Component({
  options: {
    addGlobalClass: true,
  }
})

内部class名权重高于外部