Vue 反应式组件道具答案

【问题标题】：Vue reactive component propsVue 反应式组件道具
【发布时间】：2019-01-08 22:39:45
【问题描述】：

我的组件中有添加弹出窗口并将一些道具传递给它的方法。

openPopup () {
    this.$store.dispatch('addPopup', {
      component: MapCropsPopup,
      props: {
        anchor: this.$refs.filter,
        selectedCropIds: this.selectedCropIds,
        activeSeason: this.activeSeason,
        onBeforeClose: () => {
          this.$router.push(this.getQuery({ showCrops: null }));
        },
        onSeasonChange: (season) => {
          this.activeSeason = season;
        }
      }
    });
  }

在这里，在子组件中，我将所有传递的道具存储到“道具”变量中

props: ['props']

直接在模板中使用

<div class="mcp-seasons__btn"
           :class="{ 'm--active': props.activeSeason === 'current' }"
           @click="setActiveSeason('current')">
        {{ i18n.CURRENT_LABEL }}</div>

要在父组件中更新当前季节，我使用方法 setActiveSeason

setActiveSeason (season) {
  this.props.onSeasonChange(season);
}

效果很好，会更新父组件中的“activeSeason”，但不会更新子组件中的相同属性。

我应该怎么做才能让属性再次响应？

【问题讨论】：

如何创建子组件并传递props？

标签： vue.js vue-component reactive

【解决方案1】：

当你这样做时

    selectedCropIds: this.selectedCropIds,
    activeSeason: this.activeSeason,

您正在创建一个对象的非反应性成员，这些成员在当时被初始化为给定值。相反，如果你做了类似的事情

    propParent: this

在提到props.propParent.activeSeason 的弹出组件中，您将使用反应项。

【讨论】：