学习笔记------小程序自定义组件使用
自定义组件的创建方法:
1.在根目录下创建components文件夹。
2.在components下面创新组件名,如Mycom,继续在Mycom文件夹下单击右键,新建component。
3.在创建好的组件的wxml中写出你想显示的内容即可,在wxss中编辑样式
4.比如首页想要调用Mycom组件,那么就需要在index.json中进行配置。
5.在index.json中的调用方法,属性名是组件名,值就是组件的路径
"usingComponents": {
"Mycom":"/components/Mycom/Mycom"
}
6.在index.wxml中就可以使用自定的组件了,如:
<Mycom></Mycom>
<Mycom/>
自定义组件传递属性
1.在自定义组件上传递自定义属性,如:
<Mycom myTitle="学习笔记"/>
2.需要来到Mycom自定义组件的js中,接收该自定义属性,如:
properties: {
//myTitle就是自定义的属性名,需要指定type(String/Number/Array/Objact),指定value默认值。
myTitle:{
type:String,
value:""
}
// myTitle:String
}
3.在Mycom.wxml中渲染从前端传递过来的属性。如:
<view class="Mycom">
<view class="txt">{{myTitle}}</view>
<navigator class="more">more ></navigator>
</view>