Question

想象一下，我有一个包含三个阶段的订单-个人详细信息，订单详细信息，付款。

我想从上一个组件中切换下一个组件（希望调整“ 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个组件）中step的值，并以此隐藏我第一个完成的组件并显示第二个？

感谢您的见解！

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更改为所需的组件名称，它将对其进行更改

Vue-在组件之间切换

1 个答案: