微信小程序-封装日历组件与组件传值

封装日历组件

基于封装日历组件，学会封装业务组件到使用的流程

1. 新建baseCalendar文件夹(具体步骤👉微信小程序-二次封装组件和自定义组件)
2. 在该文件夹下的json文件中添加

   {
     "component": true,
     "styleIsolation": "shared",
     "usingComponents": {
   		"van-calendar": "@vant/weapp/calendar/index" // 要封装组件的路径
     }
   }

3. 从原组件的js文件中将props中需要的内容复制到封装组件的js文件中的properties中
4. 在封装组件的wxml文件下使用原组件和添加插槽
5. 在app.json中的usingComponents定义的封装组件标签名和路径
6. 页面通过使用封装组件的标签来使用原组件加自定义的方法和样式
7. 更改组件的样式，通过官方的文档找到对应组件的样式和属性进行更改

组件的传值

1. 页面使用: 页面中的组件要使用这个属性或方法

   minDate="{{ minTimestamp }}"

2. 页面数据初始化: 在js文件中的data定义变量,并给一个默认值

   minTimestamp: 0

3. 组件类型初始化: 在js文件中的properties中写上属性名及其类型, 两种写法

   方式一：minDate: Number
   方式二：minDate:{
     type: Number,
     value: 0
   }

4. 组件使用: wxml中使用

   minDate="{{ minDate }}"

5. 页面更改: js文件的函数去更改minTimestamp的值，以此更新页面数据 — 完成传值（简单类型）

调接口获取数据后 页面向组件传值（以动态显示该日期是否约满为例）

1. 页面请求并获取约满的数据，fullTimes要初始化

   data: {
     fullTimes: []
   }
   
   async getFullTimes() {
     const result = await API.getFullTimes()
   	this.setData({
       fullTimes: result.result.list
     })
   }

2. 页面在onLoad()中调用并初始化请求

   onLoad() {
     this.getFullTimes()
   }

3. 页面组件使用这个属性或方法

   fullTimes="{{ fullTimes }}"

4. 自定义组件在js文件中的properties中定义属性名及其类型

   properties:{
     fullTimes: {
       type: Array,
       value: [],
       // 监听这边是否接收到fullTimes，有数据才初始化，防止二次初始化
       observer(newFullTimes) {
         if (newFullTimes.length) {
           this.initCalendarDateFormat()
         }
       },
     },
   },
   data: {
     formatter: null // 初始化
   }

5. 自定义组件在wxml文件中使用该变量

   formatter="{{ formatter }}"

6. 自定义组件中初始化日历的状态

   methods：{
     initCalendarDateFormat() {
       const fullTimes = this.data.fullTimes
       const formatter = (day) => {
         // 此处使用了封装的函数
         const today = isTodday(Date.now(), day.date.valueOf())
         // includes() 方法:判断fullTimes是否包含一个day.date.valueOf()值
         if (fullTimes.includes(day.date.valueOf())) {
           day.type = 'disabled'
           day.bottomInfo = '约满'
         }
         if (today) {
           day.type = 'disabled'
           day.bottomInfo = '今天'
         }
         return day
       }
           
       this.setData({
         formatter
       })
     }
   }

7. 自定义组件在lifetimes中的ready再次初始化 — 完成传值（复杂类型）