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>

然后单击该按钮，更新我的主视图上的步骤值（包含 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为你想要的组件名称，它就会改变它