在github上看到的练习，看了遍代码后，按自己的思路再修改了一下。 先放原址：。 自己做的在线demo：
主要用到的还是Vue的基本知识而已，不过要想到的细节很多。 先放效果，点击上框，显示timepicker。而且可以根据点击的是时还是分来改变圆盘的数字。
这里我用了两个组件，
根组件
rush:js;">
var app = new Vue({
el: "#app",data: {
minutes: 15,hour: 8,showTimePicker: false,current: 0 //0为时、1为分
},created: function(){
this.$on("closeTimePicker",function() { //监听关闭time-picker
this.showTimePicker = false;
}),this.$on("openTimePicker",function() {
this.showTimePicker = true;
}),this.$on("getTime",function(h,m) { //获取time-picker返回的点击后的数值，然后动态改变
this.minutes = m;
this.hour = h;
})
}
})
组件
点击时、分的时候，要“通知”根实例点击的是什么，下面的时钟才能显示相应的数字。改变父组件的属性，有两种办法，一是直接修改父组件属性；二是通过自定义事件。
rush:js;">
Vue.component('time-Box',{
template:'\
Box" @click="openTime">\
\
: \
\
',props: ['hour','minutes'],methods: {
openTime: function() {
app.$emit("openTimePicker");
},changeCurrent: function(type) {
if(type == 'h' ){
app.current = 0;
} else {
app.current = 1;
}
}
}
});
组件
这里最需要注意的就是单向数据流。时分是通过props传进来的，刚开始我直接操作this.hour，然后控制台警告。看到警告才想起看过的知识，这样很容易误改父组件的信息。所以啊，有些东西得实践才行，不能只看不敲。这里我定义一个局部 data 属性，并将 prop 的初始值作为局部数据的初始值。知识点：#单向数据流
正常情况下，如果时分不够两位数就要自动添加0，实现很简单的。刚开始直接判断是否小于10就添加。但是，“08”是小于10的，所以又自动添加0了。但是我觉得这里写得不好，还有改进的空间的。
再说说template里面的事吧。点击timepicker里面的时分改变组件的的current属性和透明度。这里显示数据就需要用到fixHour和fixMinutes了。
:
