Question

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

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”，但不会在子组件中更新相同的属性。

我应该怎么做才能使属性再次发生反应？

Answer 1

这样做的时候

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

您正在使对象的非反应性成员同时被初始化为给定值。相反，如果您做了类似的事情

    propParent: this

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

Vue反应组件道具

1 个答案: