时间戳

首页 > 解决方案 > 当组件在 Vuejs 中再次渲染时如何保持更改

javascript - 当组件在 Vuejs 中再次渲染时如何保持更改

问题描述

我有 4 个组件，它们取决于两个布尔值onePage，currentStep应该一个一个或全部一起加载。

   <div v-if="!onePage">
    <Component_1 v-show="currentStep === 1"  @eventHandler1="someFunc()" :prop="someData1" />
    <Component_2 v-show="currentStep === 2"  @eventHandler2="someFunc()" :prop="someData2" />
    <Component_3 v-show="currentStep === 3"  @eventHandler3="someFunc()" :prop="someData3"/>
    <Component_4 v-show="currentStep === 4"  @eventHandler4="someFunc()" :prop="someData4" />
  </div>

  <div v-else class="mt-5 pt-1">
    <Component_1  @eventHandler1="someFunc()" :prop="someData1" />
    <Component_2  @eventHandler2="someFunc()" :prop="someData2" />
    <Component_3  @eventHandler3="someFunc()" :prop="someData3"/>
    <Component_4  @eventHandler4="someFunc()" :prop="someData4" />
  </div>

问题是如何在切换时保持每个组件内的更改onePage？

原因例如 Component1 不会保留所做的内部更改（例如数据对象的更改），并且当它通过第二个 Div 中onePage: false, currentStep: 1的条件呈现时它会重置为默认值v-else

标签： javascriptvue.jsvuejs2vue-component

解决方案

在您的代码中，两个块中的 component_x 是不同的组件，这意味着它们具有不同的内部状态数据，因此切换 onePage 实际上会切换显示/隐藏不同的组件，并且无法保留内部更改。但是，您可以考虑将所有内部状态数据放入一个 prop 对象中，然后在父对象中初始化该对象并将其传递给 2 个组件。

编辑： 以下也可以是一个解决方案，它对每个组件 1-> 4 仅使用一个实例。您也不必移动内部状态来支持。

  <div class="mt-5 pt-1"> <!-- you can add class binding here if needed -->
    <Component_1 v-show="onePage || currentStep === 1" @eventHandler1="someFunc()" :prop="someData1" />
    <Component_2 v-show="onePage || currentStep === 2" @eventHandler2="someFunc()" :prop="someData2" />
    <Component_3 v-show="onePage || currentStep === 3" @eventHandler3="someFunc()" :prop="someData3"/>
    <Component_4 v-show="onePage || currentStep === 4" @eventHandler4="someFunc()" :prop="someData4" />
  </div>

推荐阅读