Question

下午好，请告诉我，我要这样做，以便通过单击另一个组件Calendar.vue中的getDetailInformation()来调用ModalWindowDetail组件组件中的event函数，如何实现这个吗？

App.vue

<template>
  <div class="all">
   <app-calendar @sendTextEvent="text = $event"></app-calendar>
   <app-detail  v-if="modalWindowDetail"
                :eventText="text"></app-detail>
  </div> 
</template>

<script>
  import appCalendar from './components/Calendar.vue'
  import appDetail from './components/ModalWindowDetail.vue'

  export default {
    data(){
      return{
        text: String
      }
    },
    components: {
      appCalendar,
      appDetail
    },
    computed: {
      modalWindowDetail() {
        return this.$store.state.modalWindowDetail;
      }
    }
  };
</script>

event所在的组件Calendar.vue：

<template>
     <div class="overflow-div">
        <transition :name="nameOfClass" >
          <div :key="currentPage" class="fade_wrapper">
            <div v-for="(week, i) in getCalendar" class="d_day">
            <li v-for="day in week" class="li_day">  
              <div class="day">{{ day }}</div>
              <div  v-for="event in buildEvents(i, day)" 
                    class="event"
                    v-bind:class="{  'eventBrown': eventBrown(event), 
                                     'eventPurple': eventPurple(event),
                                     'eventOrange': eventOrange(event),
                                     'eventBlue': eventBlue(event) }"
                    v-on:click="openModalDetail(event)">{{ event }}
              </div>
            </li>
          </div>
        </div>
      </transition>
    </div>
</template>

<script>
  import json from './Calendar_data.json'
  import { mapState } from "vuex";
export default {
  computed: {
    modalWindowDetail() {
      return this.$store.state.modalWindowDetail;
    },
  },
  methods: {
    openModalDetail(text){
        this.$emit('sendTextEvent', text);  
  }
};
</script>

getDetailInformation()所在的组件ModalWindowDetail.vue：

<template>
    <div class="underModalWindow">
      <div class="modalWindow">
        <img src="src/assets/x.png" width="20px" height="20px">
        <div class="nameofModal">Вся детальная информация о событии</div>
        <div v-for="(key, name) in eventDetail" class="detailEvent">{{ name }}: {{ key }}</div>
        <button>Окей</button>
      </div>
    </div>
</template>

<script>
export default {
  props: ['eventText'],
  data(){
    return{
      options: [
        { text: 'Встреча', value: '8' },
        { text: 'День Рождения', value: '4' },
        { text: 'Праздник', value: '1' },
        { text: 'Другое', value: '16' }
      ],
      eventDetail: Object,
    }
  },
  computed: {
    eventsData() {
      return this.$store.state.eventData;
    },
    modalWindowDetail() {
      return this.$store.state.modalWindowDetail;
    },
  },
  methods: {
    getDetailInformation(){
      let arrOfEvents = this.eventsData.events;
      for(let z = 0; z < arrOfEvents.length; z++){
        let memo = arrOfEvents[z].memo;
        console.log(this.memo)
        if(memo === this.eventText){
          let dataStartOfEvent = arrOfEvents[z].starts_at;
          let getStartDataOfEvent = new Date(dataStartOfEvent);
          let dataEndOfEvent = arrOfEvents[z].ends_at;
          let getEndDataOfEvent = new Date(dataEndOfEvent);
          if((getStartDataOfEvent.getHours() - 3) > 0){
            this.$store.commit('changeModalWindowDetail', this.modalWindowDetail);
            this.eventDetail = {
              'Событие': this.eventText,
              'Начало события': getStartDataOfEvent.toLocaleTimeString(),
              'Конец события': getEndDataOfEvent.toLocaleTimeString(),
              'Тип события': this.getType(arrOfEvents[z].type)
            }
          }else if(getStartDataOfEvent.getDate() != getEndDataOfEvent.getDate()){
            this.$store.commit('changeModalWindowDetail', this.modalWindowDetail);
            this.eventDetail = {
              'Событие': this.eventText,
              'Начало события': getStartDataOfEvent.toLocaleDateString(),
              'Конец события': getEndDataOfEvent.toLocaleDateString(),
              'Тип События': this.getType(arrOfEvents[z].type)
            }
          }
        }
      }
    }
  }
};
</script>

Answer 1

尝试一下：

<app-calendar @sendtextevent="(e) => {this.text = e;this.$refs.detail.getDetailInformation();}"></app-calendar>
<app-detail  v-if="modalWindowDetail" ref="detail" :event-text="text"></app-detail>

如何在另一个组件中调用函数（方法）？

1 个答案: