时间戳

首页 > 解决方案 > 在组件之间更改状态

vue.js - 在组件之间更改状态

问题描述

您好，我正在尝试创建一个单击功能，在该功能中单击日历中的某一天。通过这样做，我想更改侧边栏中显示的当前日期，这发生在另一个名为 TimeTarget 的组件中。这是我渲染日历的地方。

 <tbody>
          <tr
            v-for="(day, index) in days"
            :key="index"
            :class="[{ no_target: isHoliday(day) }, { active: moment == day.date.format('Do dddd') }]"
            class="calendar-row"
          >
            <td class="calendar-row__grid-item" @click="changeDay">{{ day.date.format('D.') }}</td>
            <td class="calendar-row__grid-item" @click="changeDay">{{ day.date.format('dddd') }}</td>
            <td class="calendar-row__grid-item">{{ day.workhours }}</td>
            <td class="calendar-row__grid-item">{{ day.overtime }}</td>
            <td class="calendar-row__grid-item">{{ day.flextime }}</td>
            <td class="calendar-row__grid-item">{{ day.sickness }}</td>
            <td class="calendar-row__grid-item">{{ day.vacation }}</td>
          </tr>
        </tbody>

我本来以为我可以用这样的功能来做到这一点

changeDay() {
      let changeDay = this.days.day.date.format();
      TimeTarget.dayjs = changeDay;
      return dayjs;
    },

但我得到一个无法读取未定义的属性“日期”。

标签： vue.jsnuxt.js

解决方案

解决方案取决于您的组件有多远。他们有同一个父母吗？然后他们可以通过事件发射和道具进行通信：

parent component
    calendar > $emit('setDate', date) // emits event with the date to parent 
    sidebar  > :selected-date="date"  // receives date via prop from the parent

如果组件没有共享父组件或彼此相距很远（公共父组件相距 2 个或更多组件），则某种状态管理（例如 Vuex（https://vuex.vuejs.org/guide/））会使生活变得更轻松。

这篇文章解释得很好：https ://www.smashingmagazine.com/2020/01/data-components-vue-js/

推荐阅读