Vue - 在组件之间切换

Question

假设我有一个包含 3 个阶段的订单 - 个人详细信息、订单详细信息、付款。

我想从前一个组件中切换下一个组件（希望调整'step'的值）

<Component1 v-if="step = 1"></Component1>
<Component2 v-else-if="step = 2"></Component2>
<Component3 v-else></Component3>

那么，在我看来，我是否可以将“step”的值传递给 component1 并执行类似的操作

<button v-on:click="step = 2">
   Submit
</button>

然后在单击时，更新我的主视图上的 step 值（使用 3 个组件），然后隐藏我的第一个完成的组件并显示第二个？

感谢您的任何见解！

Answer 1

为什么不使用动态组件？

在你的父组件上，你监听改变你的步骤的事件，我在这里将它命名为nextStep。该事件触发changeStep方法，改变组件名称。

<component @nextStep="changeStep" :name="selectedComponent"></component>

import component1 from "../components/component1.vue";
import component2 from "../components/component2.vue";
import component3 from "../components/component3.vue";
export default {
   data(){
      return {
         selectedComponent: "component1"
      }
   }
},
methods: {
   changeStep(step){
      this.selectedComponent = step;
   }
},
components: {
   component1,
   component2,
   component3
}

//在子组件中

method: {
   changeStep(){
      this.$emit("nextStep", "component2");
   }
}

这是您向父级发送事件以更改组件的方式

您只需将属性selectedComponent 更改为您想要的组件名称，它就会更改它