// 父組件
<template>
  <div>
    <date-span style="flex-grow: 1" ref="dateSpanE" :noCache="true" :startDate="startDate" 
    :endDate="endDate" type="weekrange" @change="changeDate"></date-span>
    <!-- 子彈層組件 -->
    <ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />
  </div>
</template>
<script>
import DateSpan from '@/components/DateSpanE'
export default { 
  components: { DateSpan },
  // ...
  data: () => {
    return {
      makeActiveTime: {
        startDate: '',
        endDate: '' 
      },
    }
  },
  computed: { 
    startDate() { 
      return this.makeActiveTime.startDate 
    }, 
    endDate() { 
      return this.makeActiveTime.endDate 
    } 
  },
  methods: {
    // 父組件表單日期修改時(shí)更新了傳入的日期
    changeDate(dateInfo) {
      const { start: startDate, end: endDate } = dateInfo
      this.makeActiveTime = {
        startDate,
        endDate
      }
    }
  }
}
</script>

// 子組件
<template>
  <Modal v-model="showModal" width="680" title="XXX" :mask-closable="false" @on-visible-change="visibleChange"
    :loading="loading">
    <div class="single-effect-modal">
      <div class="form-wrapper">
        <date-span style="flex-grow: 1" ref="dateSpanE" :noCache="true" :startDate="startDate" :endDate="endDate"
          type="weekrange" @change="changeDate"></date-span>
      </div>
    </div>
  </Modal>
</template>
<script>
import Api from '@/api_axios'
import DateSpan from '@/components/DateSpanE'
import { formatDate } from '@/common/util'
import moment from 'moment'

export default {
  components: {
    DateSpan
  },
  props: {
    // 定義父組件傳入的prop
    timeRange: {
      type: Object,
      default: () => {
        return {
          startDate: new Date(),
          endDate: moment().add(17, 'w').toDate()
        }
      }
    }
  },
  data() {
    return {
      loading: true,
      showModal: false,
      // data中定義子組件日期范圍組件所需的展示數(shù)據(jù)，默認(rèn)取props中定義的值
      timeRangeFromProps: this.timeRange
    }
  },
  computed: {
    startDate() {
      return this.timeRangeFromProps.startDate
    },
    endDate() {
      return this.timeRangeFromProps.endDate
    }
  },
  watch: {
    // 監(jiān)聽傳入的props值，props值更改時(shí)更新子組件數(shù)據(jù)
    // 若無(wú)此監(jiān)聽，父組件修改日期后，子組件的日期范圍得不到更新
    timeRange() {
      this.timeRangeFromProps = this.timeRange
    }
  },
  methods: {
    changeDate(dateInfo) {
      const { start: startDate, end: endDate } = dateInfo
      this.timeRangeFromProps = {
        startDate,
        endDate
      }
    },
    toggle(isShow) {
      this.showModal = isShow
    },
    // ...
  }
}
</script>
<style lang="less">
.single-effect-modal {
  .form-wrapper {
    min-height: 100px;
  }

  .item-label {
    min-width: 60px;
  }
}
</style>

// 子組件
<script>
this.$parent.makeActiveTime // makeActiveTime是父組件中的屬性
this.$parent.changeDate({startDate:xxx, endDate: xxx}) // changeDate是父組件中的方法名
</script>

// 父組件，忽略其他項(xiàng)
<date-span @conditionChange="conditionChange"></date-span>
<scipt>
// ...
methods: {
  conditionChange(controlName) {
    // ...
  }
}
// ...
</script>

<script>
// 子組件中調(diào)用
this.$emit('conditionChange', 'dateSpan')
</script>

// itemList就是來(lái)自treeSelectMixin中定義的數(shù)據(jù)
<SwitchButton :itemList="itemList" @change="toggleSelectAll"></SwitchButton>
<script>
import mixin from './treeSelectMixin'

export default {
  mixins: [mixin],
  components: {
    Treeselect,
    SwitchButton
  },
  // ...
}

</script>

// 同一個(gè).vue文件中可以出現(xiàn)以下兩個(gè)style標(biāo)簽
<style lang="less">
</style>
// 當(dāng) `<style>` 標(biāo)簽有 `scoped` 屬性時(shí)，它的 CSS 只作用于當(dāng)前組件中的元素。
<style lang="less" scoped>
</style>