1.局部注册组件
1.1创建components文件夹
1.2创建文件夹MyHeader
1.3选中MyHeader右键
说明：执行此步，将会自己创建四个文件
1.4MyHeader.wxml文件
说明：随便写点h5结构
<view class="sentence">励志语句</view>
<view class="card">
<view class="list">
<view class="row">
<view class="row-before">1.每天都是一个新的起点</view>
<view class="row-icon">
<icon type="clear" />
</view>
</view>
<view class="row">
<view class="row-before">1.每天都是一个新的起点</view>
<view class="row-icon">
<icon type="clear" />
</view>
</view>
<view class="row">
<view class="row-before">1.每天都是一个新的起点</view>
<view class="row-icon">
<icon type="clear" />
</view>
</view>
<view class="total">
共2条语句
</view>
</view>
<view class="card-footer">
<input type="text" placeholder="请输入内容"/> <button type="primary">发送</button>
</view>
</view>1.5MyHeader.wxss
说明：随便写点样式
/* components/MyHeader.wxss */
.sentence{
font-size: 40rpx;
text-align: center;
}
.card{
width: 100%;
height: 350rpx;
box-shadow: 1px 0 1px #bbbbbb;
}
.row{
margin: 10px 0;
padding: 0 20px;
flex-direction: row;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e8e8e8;
}
.total{
margin-top: 30px;
text-align: center;
font-size: 20px;
}
.card-footer{
display: flex;
padding: 10px ;
}
.card-footer input{
height: 70rpx;
flex: 8;
border: 2px solid #f4f4f4;
margin-right: 5px;
}
.card-footer button{
flex: 2;
}1.6注册组件
说明：谁要使用，谁就去注册。本文以home为例，打开home.json文件。“MyHeader”注册的组件名字，后面是组件的路径。
{
"usingComponents": {
"MyHeader":"/components/MyHeader/MyHeader"
},
"navigationBarTitleText": "首页"
}1.7使用组件
说明：在home.wxml文件中当成h5标签使用就行了
<MyHeader></MyHeader>1.8展示
1.9.总结
说明：一般使用组件是一个高频的操作，假如每个文件都要使用，那么都要一次又一次注册。
因此，我们一般注册在全局中。
2.全局注册组件
2.1app.json
说明：全局没有的话，自行写上，规则和局部注册一致。
2.2home.wxml
说明：使用组件
<My-Header></My-Header>2.3展示
2.4样式问题
说明：因为如果没有样式，那么会被全局样式接手，如果home.wxss有样式，那么会覆盖全局的样式。
3.properties
3.1使用
说明：父传字，和data对象使用一致。可以写成对象，并规定类型。
properties: {
name1:{
type:String,
value:"李四"
}
},如果类型与值不对，那么显示的也就不对了。
3.2父组件
说明：不写name属性，那么就会使用默认值李四，但是传值后就使用传的值王二
文章来源地址https://www.toymoban.com/news/detail-571500.html
文章来源：https://www.toymoban.com/news/detail-571500.html
到了这里，关于微信小程序三脚猫功夫拿下组件注册与使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
