24 calendar component devide / Calendarコンポーネント細分化 (CalendarHeader)

[hasyrails]

Calendarコンポーネント細分化1 (ヘッダー)

カレンダーヘッダーをCalendarHeaderとしてコンポーネント化する

[hasyrails]

スタイル部分を移行

$ touch app/javascript/components/CalendarHeader.vue

// CalendarHeader.vue

<template>
  <div class="calendar-header">
    <div class="calendar-header-content flex">
      <ChevronLeft fillColor="white"  @click="prevMonth" size="lg"></ChevronLeft>
      <div class="calendar-header-date">{{ currentDate }}</div>
      <ChevronRight fillColor="white" @click="nextMonth" size="lg"></ChevronRight>
    </div>
  </div>
</template>

<script>
import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue';
import ChevronRight from 'vue-material-design-icons/ChevronRight.vue';

export default {
  name: 'CalendarHeader',
  props:{
    currentDate: {
      type: String,
      required: true
    }
  },
  components:{
    ChevronLeft,
    ChevronRight
  }
}
</script>

<style scoped>
.calendar-header {
  width:1225px;
  height:100px;
  background-color: #75A9FF;
}

.calendar-header-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom:100px;
}
.calendar-header-date {
  color: white;
  font-size: 32px;
}
.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.flex > *{
  width: 8%;
  text-align: center;
}
</style>

// Calendar.vue

<template>
  <div class="calendar">
    <CalendarHeader><CalendarHeader>
    ‥
</template>

<script>
import CalendarHeader from 'path/to/CalendarHeader'

export default {
  component:{
     CalendarHeader
  }
}
</script>

[hasyrails]

日付が表示されない

Calendarコンポーネント(親)で定義している currentDateが渡ってきていないため 親から子に単方向でやり取りする方法

[hasyrails]

// CalendarHeader.vue

<div class="calendar-header-date">{{ currentDate }}</div>

export default {
  props:{
    currentDate: {
      type: String,
      required: true
    }
  },
}

//Calendar.vue

// <CalendarHeader></CalendarHeader>

<CalendarHeader
  :currentDate="currentDate">
</CalendarHeader>

export default {
  data(){
    return{
      currentDate: moment().format('YYYY/MM')
    }
  }
}

表示成功

nextMonth()メソッド、prevMonth()メソッドが渡っていない

[hasyrails]

nextMonth(), previousMonth()メソッドの受け渡し

CalendarHaderコンポーネント(子)内でクリックイベント発火 → Calendarコンポーネント(親)内で定義した nextMonth(), previousMonth()メソッドを実行

子コンポーネントから親コンポーネントのイベントを発火する