Vue中UI组件库之Vuex与虚拟服务器初识(3)

<template>
 <div>
 <MonthChooser
 :year="year"
 :month="month"
 :setYear="setYear"
 :setMonth="setMonth"
 :setView="setView"
 v-if="view == 'month'"
 ></MonthChooser>
 <MonthView :year="year" :month="month" v-if="view == 'month'"></MonthView>

 <DecadeChooser
 :year="year"
 :month="month"
 :setYear="setYear"
 :setMonth="setMonth"
 :setView="setView"
 v-if="view=='decade'"
 ></DecadeChooser>
 <DecadeView
 :year="year"
 :setYear="setYear"
 v-if="view == 'decade'"
 :setView="setView"
 ></DecadeView>
 </div>
</template>
<script>
 import MonthView from "./components/MonthView.vue";
 import MonthChooser from "./components/MonthChooser.vue";
 import DecadeChooser from "./components/DecadeChooser.vue";
 import DecadeView from "./components/DecadeView.vue";
 export default {
 data(){
 return {
 year : 2018 ,
 month : 5 ,
 view : "month"
 }
 },
 components : {
 MonthView,
 MonthChooser,
 DecadeView,
 DecadeChooser
 },
 methods : {
 ...
 setView(view){
 this.view = view; //设置视图切换
 }
 }
 }
</script>

<template>
 <div>
 <h1>
 <button @click="goPrev()">-</button>
 {{year}}年<a href="javascript:;" @click="setView('month')">{{month}}月</a>
 <button @click="goNext()">+</button>
 </h1>
 </div>
</template>
<script>
 export default{
 props : ["year", "month" , "setYear","setView"],
 methods : {
 goNext(){
 this.setYear(this.year + 1)
 },
 goPrev(){
 if(this.year <= 1970) return;
 this.setYear(this.year - 1)
 }
 }
 }
</script>

<template>
 <div>
 <h1>
 <button @click="goPrev()">-</button>
 <a href="javascript:;" @click="setView('decade')">{{year}}</a>年{{month}}月
 <button @click="goNext()">+</button>
 </h1>
 </div>
</template>
<script>
 export default{
 props : ["year", "month" , "setYear", "setMonth","setView"],
 methods : {
 goNext(){
 ...
 },
 goPrev(){
 ...
 }
 }
 }
</script>

<template>
 <div>
 <table>
 <tr v-for="i in 10">
 <td
  v-for="j in 3"
  :class="{'cur' : year == showYear(i , j)}"
  @click="tdClick(i,j)"
 >
  {{showYear(i , j)}}
 </td>
 </tr>
 </table>
 </div>
</template>
<script>
 export default {
 props : ["year","setYear","setView"],
 computed : {
 arr(){
 ...
 }
 },
 methods : {
 showYear(i , j){
 return this.arr[(j - 1) * 10 + (i - 1)]
 },
 tdClick(i , j){
 this.setYear(this.showYear(i , j)); //切换年份
 this.setView("month"); //切换年份后，回到月视图
 }
 }
 }
</script>