여러 컴포넌트의 값 전송

여러 컴포넌트의 값 전송

vuejs-wizard를 사용하여 등록 페이지를 만들고 있습니다.각 탭은 다음과 같은 컴포넌트에 있습니다.

<form-wizard color="#fcab1a" title="" subtitle="" finish-button-text="Register">
  <tab-content title="Personal Info" icon="icon-location3 fa-2x">
    <personal-info></personal-info>
  </tab-content>
  <tab-content title="Contact Info" icon="icon-box fa-2x">
    <contact-info></contact-info>
  </tab-content>
  <tab-content title="Address" icon="icon-alarm fa-2x">
    <address></address>
  </tab-content>
</form-wizard>

개인 정보:

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Personal Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Full Name <span class="text-danger">*</span></label>
            <input type="text" value="" class="form-control" v-model="name" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Age <span class="text-danger">*</span></label>
            <input type="number" value="" class="form-control" v-model="age" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

연락처 정보:

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Contact Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Mobile <span class="text-danger">*</span></label>
            <input type="text" value="" class="form-control" v-model="mobile" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Email <span class="text-danger">*</span></label>
            <input
              type="number"
              value=""
              class="form-control"
              v-model="email"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

그래서 질문입니다. 양식을 제출하는 가장 좋은 방법은 무엇입니까? 상태를 저장하기 위해 vuex가 필요한가요? 아니면 더 나은/간단한가요?

고마워요.

상황에 따라...

답은 다양한 요인에 따라 달라집니다.예를 들어 vuex를 이미 사용하고 있는지 여부, 앱 크기, 앱 테스트 기능, 필드 검증 방법(비동기/api 유효성 검사?) 등이 있습니다.

심플한 앱으로 직계 부모=>자녀관계밖에 없는 경우에는 Vuex를 종속적으로 추가하는 것을 생략하는 경향이 있습니다.(그러나 SPA를 주로 취급하고 있기 때문에 주로 사용하고 있습니다) YMMV를 사용하고 있습니다.

이 경우 부모에서 필드를 정의해야 합니다.그런 다음 각 가치의 소품과 방출기를 자녀에게, 그리고 부모에게 청취자에게 추가합니다.하면 이 수또한 그룹 전체만 선택)로 오브젝트 내의 할 수 있습니다., 인 「」를 수 있습니다.v-model탭할 수 있습니다.

최신 Vue 버전(2.6 이상)을 사용하는 경우 Vue.observable을 사용하여 Vuex의 벨/휘파람 없이 여러 컴포넌트 간에 저장소를 공유할 수 있습니다.

vuex 클론을 구축하는 방법을 보여주는 좋은 기사가 있지만, 실제로는 사용자의 요구에 맞는 스토어를 만드는 것이 훨씬 더 간단합니다.구현 방법에 관심이 있으시면 댓글로 알려주시면 제가 설명할 수 있습니다.

---

커스텀 스토어를 사용한 롤링

정말 이렇게 간단하다

작성하다store.js★★★★★★★★★★★★★★★★★★▼

import Vue from 'vue';

const store = Vue.observable({
  name: null,
  email: null,
  age: null,
  mobile: null,
});

export default store;

그런 다음 해당 컴포넌트에 액세스할 수 있는 모든 컴포넌트에서 작성 중에 스토어를 추가합니다.

import store from "../store";

export default {
  name: "PersonalInfo",
  created() {
    this.$store = store;
  }
};

스토어를 할 수 .$store

<input type="text" value class="form-control" v-model="$store.name">

코드 앤 박스 예시

Vuex가 제공하는 돌연변이에 대해 "시간 여행"과 같은 이점을 잃게 됩니다.플럭스 패턴(vuex)이 의도한 스케일이 아니기 때문에 이 크기의 앱에 이 솔루션을 사용하고 싶습니다.

vuex는 여러 파일에 분산되지 않도록 동일한 데이터를 결합합니다.이 정보를 백엔드로 되돌리는 경우 대부분의 백엔드를 한 곳에 쉽게 연결할 수 있습니다.이런 가게로 네 코드를 다시 만들거야데이터를 사용하는 대신 계산된 속성을 기록해 두십시오.계산 속성으로 실행함으로써 스토어 내에 저장된 변수를 변경하기 위해 코드를 작성할 필요가 없습니다.

개인적인.표시하다

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Personal Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Full Name <span class="text-danger">*</span></label>
            <input
              type="text"
              value=""
              class="form-control"
              v-model="register.name"
            />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Age <span class="text-danger">*</span></label>
            <input
              type="number"
              value=""
              class="form-control"
              v-model="register.age"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    register() {
      return this.$store.state.register;
    },
  },
};
</script>

연락.표시하다

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Contact Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Mobile <span class="text-danger">*</span></label>
            <input
              type="text"
              value=""
              class="form-control"
              v-model="register.mobile"
            />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Email <span class="text-danger">*</span></label>
            <input
              type="number"
              value=""
              class="form-control"
              v-model="register.email"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    register() {
      return this.$store.state.register;
    },
  },
  methods: {
    submit() {
      this.$store.dispatch("register", {
        person: this.register,
      });
    },
  },
};
</script>

<style></style>

store/index.displaces

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    register: {},
  },
  actions: {
    // register({commit}, data){
    //put in some stuff here.
    //},
  },
});

스토어 루트를 선택하시면 1.npm install vuex 2. store 3. store 3. store라는 이름의 src 폴더 내에 폴더를 추가합니다.index.js 4. main.js로 이동하여 이 행을 추가합니다.main.js에서 Import store; 5. 여기서 새로운 "Vue"({add "store")라고 표시됩니다.

Vuex는 매우 간단하며 프로젝트 규모가 커질수록 생활이 훨씬 쉬워집니다.

.sync 수식자는 소품과의 양방향 바인딩 패턴을 제공합니다.이것에 대해서는, https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier 를 참조해 주세요.

부모 컴포넌트에서는 다음과 같이 .sync 수식자를 사용할 수 있습니다.

<ChildComponent :name.sync="parentNameProperty" />
...
data: () => ({ parentNameProperty: '' }),
...

그런 다음 하위 구성 요소에서 이름을 소품으로 받고 watch 또는 메서드를 사용하여 이벤트를 내보내 상위 구성 요소의 값을 업데이트할 수 있습니다.

...
props: {
  name: {
    type: String,
    default: ''
  }
}
...
this.$emit(update:parentNameProperty, newValue)
...

Vuex는 상태를 처리하는 훌륭한 방법이지만, 소규모 애플리케이션에서는 위의 패턴을 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/61531837/submit-values-from-multiple-components