element-ui组件库中Calendar日历组件使用心得（可能用到的常用方法和如何添加监听）

最近接触到一个需求，做一个值班排班表，拿到低保真之后一直在考虑是如何实现这个排班表，考虑过自己写，也考虑过@fullcalendar/vue插件，经过一些评估之后最终选择了项目本身使用的element-ui组件库中Calendar日历组件，但是在使用过程中发现此组件api少的可怜，连基本的一些点击事件都没透传出来，这样就不太好去实现根据月份查询排班信息，但是作为前端老司机总归是能解决的。

解决方案想过有成功的，也有失败的，我都贴出来，可以看看。

1、方案一：computed子组件的curMonthDatePrefix，然后再用watch监听curMonthDatePrefix，结论：失败，对curMonthDatePrefix的watch没任何反应。

computed: {
	curMonthDatePrefix() {
	  let myCalendar = this.$refs.myCalendar;
	  return myCalendar? myCalendar.curMonthDatePrefix : "" ;
	},
},
watch: {
	curMonthDatePrefix: {
	  immediate: true,
	  handler: function (newval, oldval) {
	    console.log("value", this.value);
	    console.log("testnewval", newval);
	    console.log("testoldval", oldval);
	  },
	},
}, 

2、方案二：像watch对象中某个属性一样，结论：失败，对curMonthDatePrefix的watch没任何反应。

watch: {
    "$refs.myCalendar.curMonthDatePrefix": {
	      immediate: true,
	      handler: function (newval, oldval) {
	        console.log("value", this.value);
	        console.log("testnewval", newval);
	        console.log("testoldval", oldval);
	      },
    },
 }, 

3、方案三：使用vm.$watch API，结论：成功。

引用Calendar的组件：

mounted() {
    this.$watch(
	    function () {
	        // 这就像监听一个未被定义的计算属性
	        return this.$refs.myCalendar.curMonthDatePrefix;
	    },
	    function (newVal) {
	        // 可在此事件中添加请求信息之类的方法
	        console.log("curMonthDatePrefix", newVal);
	    },
	    { immediate: true }
    );
 }, 

4、方案四：使用extends继承Calendar组件，其合并原则和Mixins类似。继承组件myCalendar.vue中添加watch监听curMonthDatePrefix，在监听事件中添加emit，结论：成功。这也是我最终采用的方式，这种方式还可以改写template，以便后期更好地扩展，同时在下面的代码中加了一下可能会用到的方法。

myCalendar.vue：

引用myCalendar的组件：

Time!