这个例子分享了Vue实现日历小部件的具体代码，供大家参考。具体内容如下

我们先来看看效果图，如下

源代码可以在我的github中找到

实现关键点：

1.组件的重用和父子组件的价值传递

显然，月历样式(不同的数据)每年都是一致的，所以自然的想法是将每个月作为一个公共组件重复使用十二次，从而避免重复编码。每个组件之间的区别在于年份和月份，我们可以通过将值从父组件传递给子组件来区分子组件。关键代码如下：

template div class=' wrap '//months是一个包含十二个月名称的数组，用v-for循环呈现，月份的索引传递给子组件div v-for='(items，index)在月份' v-if=' Index==monthindex ' month : month name=' items ' : year=' year '/year传递给子组件。年计算为：个月。index=' index '//将月份传递给子组件：day='today'//将日期传递给子组件3360 key=' index '/month/div/div/template//data part data(){ return { monthindex : 0 0，months :[' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9 '，' 10 '，' 11 '，' 12 '，} year :-1，DAY:-1，}，2当天执行默认选择，切换月份时其他月份不会有选择样式。

在父组件的挂载钩子中，我们将计算当前年份的日期并将其发送给子组件。子组件有一个day属性来存储父组件发送的today值。day属性的默认值为-1。父组件传递该值后，将重新分配day属性。

//父组件挂载(){让myDate=new Date()；this . monthindex=my date . getmonth()；this . year=my date . getfullyear()；this . today=my date . getdate()-1；}，子组件循环呈现每天的日期时会设置一个动态绑定样式，类似于下面的代码(实际代码略有不同):

//index值为0-41div v-for='(item，index)in days ' : key=' Index ' class=' day Index ' @ click=' choose(Index)' : class=' { choose : day==Index } '//动态绑定样式当数据中属性day的值等于Index的值时，A choose样式会被添加到div中，但是有一个问题——，就是这个索引的div每个月都会有这个类样式。

解决方法：在坐骑上做出判断。如果是当月，则在数据中为日赋值；否则，它将保持-1不变。-1在渲染日期循环时没有对应的索引，因此不会生成选定的样式。

如果(新日期()。getMonth()==this . monthindex){ this . chooseindex=this . day this . first dayindex；}3.如何计算本月日历中上个月多出来的天数以及下个月要增加的天数和日期？

这是日历中复杂而关键的一点。我们可以看到每个月的日历总共需要42天。除了这个月的几天，肯定会包括上个月的一些日期和下个月的一些日期。因此，这个问题涉及以下因素：

1).在本月1日之前，上个月应该还有多少天

2)上个月最后一天不同，28 29 30 31

3).本月的天数和为下个月预留的天数

4).本月以外的日期需要灰显

这四个问题可以通过以下思路解决：

问题1:计算本月1日一周中的哪一天。如果是周一，应该为上个月预留一天(日历从周日开始)，如果是周二，应该预留两天

每月的第一天可以通过以下函数获得

新日期(年/月/01)。getDay()；问题2:可以在data - monthLastDay(js (JS对象)中创建一个哈希表，对应每个月的天数，那么就可以通过monthLastDay[monthIndex-1]得到上个月最后一天的日期，其中如果上个月是二月，就要单独判断是不是闰年。

monthLastDay:{ 0:31，1:28，2:31，30，4:31，5:30，6:31，7:31，8:30，9:31，10:30，11:31}，getMonthLastDay=1) {返回this . monthlastday[月]；} else {//this . lea pyar是一个布尔值，它指示如果(this . lea pyar){ return 29；} else { return 28}}}，得到上个月最后一天的日期和本月1日的星期几后，就可以知道上个月哪些日期需要填写了，就可以推送到days数组(本月的日历渲染数据存储数组)。

问题三：这个问题简单多了，因为这个月的日历总共有42天。我们将数组天数以i42进行循环。推送最后一个月的日期和本月的日期后，将日期重置为1，并继续推送，直到for循环结束。

//index是上月最后一天的日期。lastDayNum是上个月的剩余天数。Generatedays (index，last day num){ let temp=1；//这个for循环是推上月的剩余日期，for(让i=lastDayNumI 0；I-){ this . days . push([(index-I ^ 1)。toString()])；} //index设为1，本月开始推送的天数为index=1；for(设I=0；I 42-lastDayNum；I) {//闰年二月若(此。闰年){if (index=29) {this。几天。推送(索引。tostring())；}//非闰年月} else if (index=this。上月最后一天[这。月指数]){这个。days.push(索引。tostring())；//else这是push下个月的日期} else { this . days . push([temp . tostring()])；温度；}索引；}}，问题4:从上面的代码可以看出，当推送的不是本月的日期时，推送进day数组的不是字符串而是数组[xxx.toString]，这样可以区分本月的日期和本月的日期，然后在v-if和add类中判断值

div v-for='(item，index)in days ' : key=' index ' class=' dayIndex ' @ click=' choose(index)' : class=' { choose : choose index==index } '//Item为字符串，即当月的日期。div v-if=' type of(item)=' string ' ' { { item } }/div//否则，添加class set grey div v-else class=' set grey ' { item[0]}/div/div就是本文的全部内容，希望对大家的学习有所帮助。