Vue의 구성 요소 간에 데이터를 전달합니다.회사 명

소개

Vue를 사용하여 응용 프로그램을 구축합니다.js는 모듈을 끼워 넣는 조합이 필요합니다.본고에서 우리는 응용 프로그램에 필요한 기능을 실현하기 위해 이러한 구성 요소 간에 데이터를 전달하는 방법을 이해할 것이다.우리는 두 가지 데이터를 전달하는 방법을 토론할 것이다. 우리는 전달 도구를 통해 데이터를 부모 구성 요소에서 하위 구성 요소로 전달할 수 있거나, $emit 방법을 사용하여 하위 구성 요소의 데이터를 부모 구성 요소에 사용할 수 있다.
전달 도구는 항상 부모 대상에서 하위 대상에게 전달되지만 실제로는 부모 대상에서 이벤트를 촉발할 수 있습니다.함수를 서브어셈블리에 전달하여 이러한 현상을 초래할 때 우리는 이러한 상황을 연구할 것이다.
$emit 방법은 데이터를 부모 구성 요소에 사용할 수 있을 뿐만 아니라, 실제로 부모 구성 요소의 일련의 이벤트를 촉발할 수 있습니다.우리는 아래에서 더 많은 정보를 이해할 것이다.

응용 프로그램과 만나다

응용 프로그램을 봅시다.사용자 정원에 대한 데이터가 포함된 홈페이지를 볼 수 있습니다.사용자가 이 정보를 편집하기를 원할 때, 폼을 포함하는 패턴을 보일 것입니다.폼은 사용자의 입력을 처리하고 일련의 사무를 통해 데이터를 홈 페이지로 전송하여 새로 입력한 데이터를 다시 보여 줍니다.
이것은 우리의 정보 표시줄이 홈페이지에 있는 외관이다.

손을 바꾸다

도구로서 우리는 홈페이지에서 함수와 편집할 원시 데이터를 아래로 전달할 것이다.이 함수는 단일 매개 변수를 채택한다.제출된 업데이트 데이터는 이 매개 변수의 매개 변수로 전송됩니다.함수는 편집 폼의 국부 범위 내에서 호출되기 때문에, 우리는 업데이트된 값에 접근할 수 있고, 그것들을 매개 변수로 함수에 전달할 수 있다.그러나 함수는 상부 작용역에서 왔기 때문에, 우리가 그것을 호출할 때, 홈페이지의 값은 함수가 이 작용역에 연결되어 있기 때문에 업데이트됩니다.
홈 함수를 호출하는 구성 요소는 폼에서 업데이트 데이터를 수신하는 방법이 필요합니다.이를 위해, 우리는 $emit 방법을 사용할 것입니다.양식 제출 단추를 누르면 구성 요소가 데이터를 보냅니다.이 데이터를 보낼 때, 부모 구성 요소에서 함수를 터치합니다. 이 구성 요소는 이 데이터를 매개 변수로 자동으로 전달합니다.그리고 이 함수는 데이터베이스와 홈페이지에 표시된 데이터를 업데이트합니다.어디 보자.
우선, 우리는 홈페이지에서 도구를 전달한다
GardenMain.vue

<editmodal
        :id="gardenId"
        :name="name"
        :lat="location.lat"
        :lng="location.lng"
        :width="gardenSize.width"
        :height="gardenSize.height"
        :updateMain="updateMain"
      ></editmodal>

함수 updateMain은 다음과 같습니다.

updateMain: function (garden) {
      const { id, lat, lng, width, length, name } = garden.data;
      this.gardenSize = { width, height: length };
      this.name = name;
      this.location = { lat, lng };
    },

이 도구들은 구성 요소에 전달되고 있습니다. EditModal, 이 구성 요소를 보여 드리겠습니다.
아이템은 독립적인 속성으로 전달되기 때문에 우리는 아이템을 받을 준비를 해야 한다.다음은 수신 구성 요소에 아이템을 등록하는 방법을 살펴보겠습니다.
편집 모드.vue

export default {
  name: "EditModal",
  props: {
    id: {
      type: Number,
    },
    name: {
      type: String,
    },
    lat: {
      type: Number,
    },
    lng: {
      type: Number,
    },
    width: {
      type: Number,
    },
    height: {
      type: Number,
    },
    updateMain: {
      type: Function,
    },
  },

예기한 모든 아이템은 예기한 유형과 함께 여기에 등록해야 합니다.
한 마디로 하면, 우리는 이 정보를 다음 구성 요소에 전달할 것이다. 이 구성 요소는 패턴 편집기에서 나타날 것이다.편집기는 표를 순서대로 보여주고 제출할 때 보내는 데이터를 포획합니다.이것은 반대로 updateMain 함수를 호출합니다.우리의 교역은 완성될 것이다.편집기의 두 가지 관건적인 요소, 템플릿을 살펴보겠습니다. 그 중에서 폼 EditGarden과 스크립트의 방법 대상,submitEdit 함수가 그 안에 있습니다.
편집하다vue

<template>
  <div>
    <EditGarden
      v-on:edit:garden="submitEdit"
      :id="this.id"
      :name="this.name"
      :lat="this.lat"
      :lng="this.lng"
      :width="this.width"
      :height="this.height"
    />
  </div>
</template>

methods: {
    submitEdit(info) {
      axios.put("/garden/gardenupdate", {
          id: this.id,
          info: info,
        })
        .then((garden) => {
          this.$emit("close");
          this.updateMain(garden);
        });
    },
  },

먼저 주의해야 할 것은 코드 줄이다

v-on:edit:garden="submitEdit"

템플릿에 있습니다.편집:garden은 서브어셈블리 handleSubmit의 함수에 대한 참조입니다.어디 보자.
EditGarden.vue

methods: {
    handleSubmit() {
      this.$emit("edit:garden", {
        name: this.gardenName,
        lat: this.latt,
        lng: this.long,
        width: this.wid,
        length: this.hei,
      });
    },
  },

handleSubmit의 첫 번째 매개변수는 편집: garden입니다.이것이 바로 이 함수의 편집기 이름입니다.vue.이것은 수출 명칭과 같다.이것emit 방법은 옵션 대상(handleSubmit의 두 번째 인자)의 값을 handleSubmit 함수를 호출할 때 부모 구성 요소에서 사용할 수 있도록 합니다.
편집기의 v-on에서도 주의하십시오.EditGarden 서브어셈블리가 데이터를 보낼 때마다 SubmitEdit 함수라고 합니다.이렇게 하면 구성 요소는 반응적이다. 한 구성 요소의 변화는 다른 구성 요소의 일련의 변화를 촉발할 수 있다.submitEdit 함수는 데이터베이스를 업데이트하기 위해 먼저 axios를 호출합니다.그리고 성공하면, 자신의 $emit를 호출합니다. "close"인자만 받아들입니다.이것은 부모 구성 요소의 모드를 닫습니다.마지막으로, 이것은 홈페이지에서 전송된 updateMain 함수를 호출합니다.그러면 GardenMain의 데이터가 업데이트되어 바로 페이지로 다시 표시됩니다.
모달의 에디트 가든 양식입니다.

업데이트된 GardenMain입니다.

데이터 흐름은 다음과 같습니다.

GardenMain에서 EditModal로 아이템 전달

EditModal에서 편집기로 아이템 전달

아이템이 편집에서 편집정원으로 전달

EditGarden에서 편집기로 전송된 데이터(사용자 입력)

편집기에서 EditModal 모드를 닫는 데 사용되는 데이터

편집기의 updateMain 함수 호출 GardenMain

의 데이터 즉시 업데이트

결론

여기에서 우리는 부모 구성 요소와 하위 구성 요소 사이에서 다양한 방식으로 데이터를 전달하는 것을 보여 준다.Props는 상위 객체에서 하위 객체로 데이터를 전달하는 데 사용됩니다. $emit는 데이터를 하위 대상에서 부모 대상으로 발사하는 데 사용됩니다.하위 시스템에서 부모 시스템에서 전달된 함수를 호출하여 부모 시스템의 데이터를 업데이트합니다.