한 구성 요소에서 다른 구성 요소로 양식 데이터 전달

한 구성 요소에서 다른 구성 요소로 양식 데이터 전달

양식이 있는 구성요소의 일부가 아닌 버튼을 통해 양식에서 정보를 얻으려고 합니다.

기본적으로 현재 구조는 다음과 같습니다.

->구성요소 A(버튼은 여기에 있습니다) -->구성요소 A 내부에서 양식이 위치한 다른 구성요소(B)를 가져옵니다.

그래서 저는 부품 A에 있는 버튼을 사용하여 부품 B의 정보를 전달하려고 합니다.

구성 요소 B가 구성 요소 A의 일부가 아닌 이유(상대적으로 쉽게 만들 수 있음)는 다른 여러 곳에서 사용되기 때문입니다.

구성 요소 A에는 다음이 있습니다.

    `<ComponentB></ComponentB>
    <div class="padding">
        <button @onSubmit="onSubmit" class="add-button btn btn-md float- 
        right" 
        type="submit">Add items from component B</button>
    </div>`

구성 요소 A의 내보내기 기본값에 있는 내 데이터입니다.

'//ComponentB'에서 구성 요소 B를 가져오고, 'vuex'에서 {mapActions}을(를) 가져옵니다.

export default { name: "ComponentA", components:{ ComponentB }, data(){ return{ firstname: '', surname: '', dateOfBirth: '', isPolicyHolder: '', drivingLicence: licenceNumber: '', countryLicenced: '', coverEffectiveFrom: '', coverEffectiveTo: '', } }

버튼 클릭 시 정보를 전달하려는 vuex 상태도 있습니다.

구성요소 A에서 다음 방법이 있습니다.

    `methods:{
    ...mapActions(['addDriver']),
    onSubmit(e){
        e.preventDefault();
        this.addDriver( this.firstname, 
                        this.surname, 
                        this.dateOfBirth,
                        this.isPolicyHolder,
                        this.licenceNumber,
                        this.countryLicenced,
                        this.coverEffectiveFrom,
                        this.coverEffectiveTo)
    }
}`

구성요소 B는 텍스트 상자와 날짜 선택기를 몇 개만 보관할 수 있습니다.

요약하자면, 버튼을 클릭하면 구성 요소 B에 입력된 모든 정보가 구성 요소 A 데이터로 이동합니다.

변수를 관리하려면 Vuex 상태를 생성해야 합니다.그런 다음 작업을 만들고 상태를 수정합니다.그 후에, 당신은 B 구성 요소에서 당신이 원하는 것을 얻을 수 있습니다.

const store = new Vuex.Store({
  state: {
    // your states
  },
  mutations: {
    // change state here sync
  },
  actions: {
    // call mutations here, but you can do this async as axios methods etc..
  },
  getters: {
    // need this only if state still needs some calculation.
  }
}

그래서 이 모든 것을 만든 후에.위와 같은 작업을 호출할 수 있습니다.

this.$store.dispatch('ACTION')

그리고 성분 B의 상태를 가져옵니다.

this.$store.state.stateYouWant

또는 게터와 함께.

this.$store.getters.getterYouCreated

언급URL : https://stackoverflow.com/questions/57418738/pass-on-the-form-data-from-one-component-to-another