小程序 基本组件功能

组件是一个单独的文件，里面包含着功能，样式，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名称).方法()

欢迎大家前来指点!