Vueのコンポーネント間でデータを渡す.js

13314 ワード

テキストリンク

導入

Vueを用いたアプリケーションの構築JSは入れ子になったコンポーネントの構成を必要とします.この記事では、これらのコンポーネント間でデータを渡す方法を示します.私たちはデータを渡す2つの方法について話します:私たちは小道具を通過することによって親から子へデータを渡すことができます、あるいは、私たちは、親要素に利用可能な子供コンポーネントでデータを作るために、$ emitメソッドを使用することができます.
常に親から子へ渡されるにも関わらず、小道具を渡すことは、実際にイベントを親で引き起こさせることができます.このような現象において、子コンポーネントに関数を渡すと、そのような場合について調査します.
$ emitメソッドはデータを親コンポーネントに利用可能にするだけでなく、実際に親コンポーネントの一連のイベントをトリガーすることもできます.このことについてはもっと詳しくご覧下さい.

アプリを満たす

アプリを見ましょう.我々は、ユーザーの庭に関するデータを含むメインページを見ています.ユーザーがこの情報を編集したい場合、フォームを含むモーダルが描画されます.フォームは、ユーザー入力を処理します、そして、一連の取引によって、データは新しい入力データを再レンダリングするために主なページに戻されます.
これは、メインページの情報バーのようなものです.

手を変える

小道具として、私たちは、メインページだけでなく、編集する元のデータから機能を通過されます.この関数は一つのパラメータをとります.Submitからの更新されたデータは、このパラメタのための引数として渡されます.この関数は、編集フォームのローカルスコープで呼び出されるため、更新された値にアクセスでき、関数への引数として渡すことができます.しかし、関数が上部スコープから来ているので、呼び出したときに、関数がそのスコープにバインドされているので、メインページの値が更新されます.
メインページ機能を呼び出すコンポーネントは、フォームから更新されたデータを受け取る方法を必要とします.このために、$ emitメソッドを使用します.フォームの送信ボタンをクリックすると、コンポーネントがデータを出力します.このデータが発行されると、自動的に引数として渡されたこのデータを持つ親コンポーネントで関数がトリガーされます.この関数は、メインページに表示されるデータと同様にデータベースを更新します.見てみましょう.
最初にメインページから小道具を渡します
ガーデニング.Vue

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

この関数は以下のようになります:

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

これらの小道具はEditModeコンポーネントに渡されますので、次のコンポーネントを見てみましょう
小道具が独立した特性として渡されたので、我々はそのようにそれらを受け取る準備をしなければなりません.以下に、受信コンポーネントにpropを登録する方法を示します.
エディトモーダル.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関数を呼び出します.我々の取引は、それから完全です.エディタのテンプレートの2つの重要な要素を見てみましょう.テンプレートは、フォームeditgardenがレンダリングされ、メソッドオブジェクトがスクリプト内にあります.
エディタ.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"

テンプレートで.Edit : HandleSubmitの子コンポーネントにある関数へのリファレンスです.見てみましょう.
エディットガーデン.Vue

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

handlesubmitへの最初の引数が「edit : garden」であることに注意してください.これはエディタの関数として知られているものです.Vueそれは輸出名のようです.これですEMITメソッドは、handlesubmit関数が呼び出されるたびに、親オブジェクトで使用可能な2番目の引数、つまり、オプションオブジェクトの値を渡します.
V - Onのエディタでの注意も.vueファイルは、editgarden子コンポーネントがデータを出力するたびに、関数をSubmitEditと呼びます.このように、コンポーネントは反応性である.そして、1つのコンポーネントの変更は他のものの一連の変化を引き起こすことができる.SubmitEdit機能は、最初にデータベースを更新するためにAxios呼び出しを行います.そして、それが成功したならば、それは自身の$ emitを呼び出します.これは親コンポーネントのモードを閉じます.最後に、メインページから渡されたUpdateMain関数を呼び出します.これは、すぐに再ページにレンダリングするGardenMainのデータを更新します.
ここでは、我々のEditgarden