1.局部注册组件

1.1创建components文件夹

1.2创建文件夹MyHeader

 1.3选中MyHeader右键

说明：执行此步，将会自己创建四个文件

 1.4MyHeader.wxml文件

说明：随便写点h5结构

励志语句
1.每天都是一个新的起点1.每天都是一个新的起点1.每天都是一个新的起点共2条语句 发送

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标签使用就行了

1.8展示

 1.9.总结

说明：一般使用组件是一个高频的操作，假如每个文件都要使用，那么都要一次又一次注册。

因此，我们一般注册在全局中。

2.全局注册组件

2.1app.json

说明：全局没有的话，自行写上，规则和局部注册一致。

2.2home.wxml

说明：使用组件

 2.3展示

2.4样式问题

说明：因为如果没有样式，那么会被全局样式接手，如果home.wxss有样式，那么会覆盖全局的样式。

3.properties

3.1使用

说明：父传字，和data对象使用一致。可以写成对象，并规定类型。

  properties: {name1:{type:String,value:"李四"}},

如果类型与值不对，那么显示的也就不对了。 

3.2父组件 

说明：不写name属性，那么就会使用默认值李四，但是传值后就使用传的值王二

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！