组件是一个单独的文件，里面包含着功能，样式，wxml。用于代码复用率高的地方，或是功能点特殊的地方。我们即可来编写组件。
1.在当前目录下创建component文件，组件目录
image.png
2.在notice.json里面要设置属性
{
"component": true
}
3.要注意组件的wxss.的样式规范
//组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
//组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
//子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
//继承样式，如 font 、 color ，会从组件外继承到组件内。
//除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
4.子组件：着重点即js部分
Component({
//接受父组件传过来的值，及属性的默认值
properties: {
obj:{
type:Object,
value:''
},
},
//组件的内部数据，和 properties 一同用于组件的模板渲染
data: {
},
//组件数据字段监听器，用于监听 properties 和 data 的变化
observers:{},
//组件生命周期 在组件实例进入页面节点树时执行
attached: function () {
var self = this;
//子组件会于父组件之前加载，传值时需要延时一秒在赋值。目前我也没有想出什么好办法。欢迎大家留言
setTimeout(() =>{ //
self.setData({
});
},1000)
},
//方法
methods: {
bindIKnow: function(){
// detail对象，提供给事件监听函数
var myEventDetail = {
isShowNotice:false,
}
var myEventOption = {} // 触发事件的选项
//通过triggerEvent方法，定义要给父组件传值
this.triggerEvent('isShowNoticeFun', myEventDetail, myEventOption)
},
testFun: function(){
console.log(123)
},
}
})
5.那么在父组件调用时应在父组件的json中引用
"usingComponents": {
"compontents-notice":"/components/notice/notice"
},
//要注意引用路径 带有../或是../../这样的路径在真机中会报错，不识别。
6.父组件的wxml中引用
//id为 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象。
//通过obj来给子组件传值
//bind:isShowNoticeFun是接受子组件自定义的事件
//ShowNoticeFun 是在父组件定义的事件，用来接受子组件传过来的值
<compontents-notice id="notice" bind:isShowNoticeFun="ShowNoticeFun" obj="{{objs}}" ></compontents-notice>
7.父组件js。
ShowNoticeFun(e) {
console.log(e.detail) //子组件带过来的值 isShowNotice
// 父组件也可主动调用子组件的方法
this.selectComponent('#notice').testFun()
},
总结
1.创建组件
wxml，wxss，js，json，
2.在父组件中引用
父组件json中："component-notice:/components/notice/notice"
3.父子间通讯
父 通过 wxml 传值
子 通过 triggerEvent 方法
4.父主动调用子方法
this.selectComponent(id名称).方法()
欢迎大家前来指点!
网友评论