Vue - 구성 요소 간 전환

Vue - 구성 요소 간 전환

개인 정보, 주문 세부 정보, 결제 등 3단계의 주문 양식을 가지고 있다고 상상해 보십시오.

이전 구성 요소 내에서 다음 구성 요소를 전환하려는 경우('step' 값을 조정하려고 함)

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

그래서, 내 견해로는, 내가 '단계'의 가치를 구성요소1에 넘겨서 다음과 같은 일을 하는 것이 가능할까?

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

클릭한 다음 기본 보기에서 단계 값을 업데이트하고(세 가지 구성 요소로) 내 첫 번째 완료된 구성 요소를 숨기고 두 번째 구성 요소를 표시하십시오.

통찰력이 있어서 고마워!

동적 구성요소를 사용하지 않는 이유

당신의 부모 구성 요소에서 당신의 스텝을 바꾸는 이벤트를 듣고, 나는 여기에 이름을 붙였다.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원하는 구성 요소 이름으로 변경됨

참조URL: https://stackoverflow.com/questions/62152450/vue-switching-between-components