小程序の组件使用

组件的使用

1. 注册自定义组件

   1. 在微信开发者工具中,选择components文件夹鼠标右击选择新建component,输入名称后自动创建4个文件,基本与page页面结构相同
   2. 在需要使用组件的页面文件或者组件文件,选择.json结尾的配置文件
   3. 在json文件中的”usingCompoents”属性中进行配置

      {
        "usingComponents": "需要引入的组件路径"
      }

2. 使用第三方组件库(vantUI)
   详情见: https://vant-contrib.gitee.io/vant-weapp/#/quickstart

父子组件通信

1. 父组件通信子组件

   父组件中: 
     <child-comp value="{{ num }}"></child-comp>
   
     Page({
       data:{
         num: 1
       }
     })
   
   子组件中:
     <view> {{ value }} </view>  --> 显示为1
   
     Component({
       properties:{
         value:{
          type: Number,
          value: 0
         }
       },
       lifetimes:{
         ready(){
          console.log(  this.properties.value ) --> 0
         }
       }
     })

   注意:

    (1) 也可以通过子组件的data获取在properties定义的值,因为在子组件接收父组件传递的参数后,data会拷贝一份properties的值,但是不推荐使用data里的值,容易造成代码混淆
    (2) 不能直接使用setData去修改propertie中定义的参数,必须使用子组件通信父组件的方式改变值
   

2. 子组件通信父组件

   父组件中:
       // 首先绑定自定义事件用来接收子组件传递的参数
       <view bindgetChildValue="getValue"></view>
   
       Page({
         getValue(e){
           // 在e.detail中接收子组件传递的参数,key名为value
           console.log(e.detail.value)
         }
       })
   
   子组件中:
     // 使用全局定义的方法 this.triggleEvent('父组件自定义事件名称', 子组件需要传递的参数)
     <button catchtap="passValue" data-item="2" >点击传参</button>
   
     Component({
       data:{
         num : 2
       },
       methods:{
         passValue(e){
           const { item } = e.currentTarget.dataset
           this.triggerEvent('getChildValue',{ num:this.data.num ,item  })
         }
       }
     })

组件的生命周期

1. 组件的生命周期最好定义在lifetimes属性中

   Component({
     lifetimes:{
       ready(){}
     }
   })

2. 组件生命周期

   属性	描述
   created	组件刚刚被创建,不能使用setData
   attached	组件实例进入页面节点树执行
   ready（常用）	组件布局完成后执行
   moved	组件实例被移动到节点树另一个位置时执行
   detached	组件实例被从页面节点树移除时执行

observers(监听属性)

1. 定义:
   小程序组件独有的属性。数据监听器支持监听属性(properties)或内部数据(data)的变化，可以同时监听多个。一次 setData 最多触发每个监听器一次。
2. 使用:

   (1) 对象/数组单层监听
     data:{
       arr:[1,2,3]
       obj:{ a:1 , b:2}
     },
     observers:{
       'arr[1]'(newval){},
       'obj.a'(newval){}
     }
   
   (2) 多个变量同时监听
     data:{
       num1: 1,
       num2: 2,
       sum:0
     }
     observers:{
       'num1,num2'(numbers1,numbers2){
         this.setData({
           sum = numbers1 + numbers2
         })
       }
     }
   
    (3) 监听所有子数据的变量变化
    定义: 通过通配符**
    data:{
       obj:{
          child:{
             a:1,                
             b:2
         }
       }
     },
     observers:{
       'obj.child.**'(newval){
         newval === this.data.obj.child
       }
     }
   
    (4) 可以直接监听**,即监听所有数据的变化
     observers:{
       '**'(newval){
         // newval = {...this.data,...this.properties}
       }
     }