Panduan lengkap untuk melaksanakan komunikasi komponen dalam Vue2.x (props, $emit, Vuex)

Panduan lengkap untuk melaksanakan komunikasi komponen dalam Vue2.x (props, $emit, Vuex)

Vue, sebagai rangka kerja JavaScript moden, sangat popular apabila membangunkan aplikasi web. Seni bina komponen Vue membolehkan pembangun mengasingkan kod dan fungsi dengan mudah, sambil juga membolehkan komunikasi fleksibel melalui komponen yang berbeza.

Dalam artikel ini, kami akan meneroka tiga kaedah komunikasi komponen dalam Vue2.x: props, $emit dan Vuex, untuk membantu anda mengurus sumber dengan lebih baik apabila membina aplikasi Vue.

Props

props ialah salah satu kaedah lulus parameter komponen Vue. Nilai boleh dihantar kepada komponen kanak-kanak menggunakan prop. Dalam komponen kanak-kanak, nilai prop adalah baca sahaja, yang bermaksud ia tidak boleh diubah suai. Ini membolehkan aliran data sehala, menjadikannya lebih mudah untuk menyelenggara dan menyahpepijat aplikasi Vue.

Berikut ialah contoh:

Dalam komponen induk, kita boleh mencipta prop yang dipanggil "ibu bapa" dan menyampaikan prop yang dipanggil "mesej".

<template>
  <div>
    <child :message="msg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      msg: "Hello World!"
    };
  }
};
</script>

Dalam komponen anak, kita boleh menerima nilai prop yang diluluskan dan menggunakannya dalam templat.

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Dalam contoh ini, "msg" ditakrifkan dalam komponen induk dan "mesej" ialah nama prop - yang mesti sepadan dengan nilai dalam komponen induk. Komponen kanak-kanak mesti menggunakan pilihan "props" untuk menentukan jenis data props dan nilai yang mesti diluluskan.

Ini adalah contoh asas untuk data yang melalui prop. Jika anda mempunyai berbilang prop yang perlu dilalui, anda boleh meletakkannya dalam objek dan menyampaikannya kepada komponen anak.

$emit

$emit ialah satu lagi kaedah komunikasi komponen yang digunakan secara meluas dalam Vue. Anda boleh menggunakan $emit untuk mencetuskan peristiwa tersuai dan menghantar data kepada komponen induk. Tidak seperti prop, $emit boleh mencapai pemindahan data dua hala, menjadikan perkongsian sumber antara komponen dalam aplikasi Vue lebih mudah.

Tidak seperti prop, $emit boleh menghantar data daripada komponen anak kepada komponen induk. Berikut ialah contoh:

Dalam contoh ini, kami mentakrifkan nama acara tersuai "ucapan" dan melancarkan acara apabila butang diklik. Kami juga menghantar item yang dipilih ke dalam acara tersebut.

<template>
  <div>
    <button @click="sayHi()">Click me</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    sayHi() {
      this.$emit("greeting", {
        message: "Hello World!"
      });
    }
  }
};
</script>

Dalam komponen induk, kita boleh mendengar acara tersuai dalam komponen anak dan menggunakan data yang diluluskan apabila acara tersebut dicetuskan.

<template>
  <div>
    <child @greeting="handleGreeting"></child>
    <div>{{ greeting }}</div>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      greeting: ""
    };
  },
  methods: {
    handleGreeting(data) {
      this.greeting = data.message;
    }
  }
};
</script>

Dalam contoh ini, "handleGreeting" ialah kaedah yang digunakan untuk mengendalikan acara. Kaedah ini menerima sebagai parameter peristiwa tersuai yang dicetuskan oleh komponen anak. Pemindahan data boleh diperolehi daripada peristiwa $emit dalam komponen anak.

Vuex

Vuex ialah perpustakaan pengurusan negeri untuk aplikasi Vue.js. Ia membolehkan komponen berkongsi keadaan, menjadikan komunikasi antara komponen lebih mudah dan cekap.

Berikut ialah contoh:

Dalam contoh ini, kami berkongsi data dengan mencipta kedai Vuex bernama "kedai". Dalam atribut keadaan, kita boleh menentukan data yang perlu dikongsi. Dalam atribut mutasi, kita boleh menentukan fungsi untuk mengubah suai data dalam stor. Dalam atribut getter, kita boleh menentukan fungsi yang memproses data dan mengembalikan nilai yang dikongsi.

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    greeting: "Hello World!"
  },
  mutations: {
    changeGreeting(state, payload) {
      state.greeting = payload.greeting;
    }
  },
  getters: {
    getGreeting(state) {
      return state.greeting;
    }
  }
});

Anda boleh menggunakan data dan fungsi dalam stor dalam mana-mana komponen Vue. Dalam contoh ini, kami mempunyai dua butang disediakan. Mengklik butang "salam" akan memaparkan nilai atribut "salam" di kedai. Butang "tukar ucapan" akan menukar nilai "ucapan" dalam kedai dengan memanggil fungsi yang kami takrifkan dalam atribut mutasi melalui fungsi komit.

<template>
  <div>
    <div>{{ greeting }}</div>
    <button @click="getGreeting">greeting</button>
    <button @click="changeGreeting">change greeting</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Child",
  computed: {
    ...mapGetters(["getGreeting"])
  },
  methods: {
    ...mapMutations(["changeGreeting"]),
    getGreeting() {
      alert(this.getGreeting);
    }
  }
};
</script>

Dalam contoh ini, "mapGetters" dan "mapMutations" boleh digunakan untuk memetakan data dan fungsi dalam stor kepada sifat dan kaedah yang dikira komponen. Dalam kaedah ini, kami menggunakan makluman untuk memaparkan nilai atribut "salam" di kedai. Apabila butang "Tukar ucapan" diklik, fungsi changeGreeting akan dipanggil untuk menukar atribut "ucapan" dalam kedai.

Ringkasan

Di atas ialah tiga kaedah untuk melaksanakan komunikasi komponen dalam Vue2.x: props, $emit dan Vuex. Dalam pembangunan sebenar, anda boleh memilih kaedah komunikasi yang hendak digunakan berdasarkan keperluan dan senario yang berbeza.

Melalui prop, penghantaran data sehala boleh dicapai untuk memastikan aliran data yang jelas antara komponen $emit boleh melakukan penghantaran data dua hala antara komponen, menjadikan sumber antara komponen dalam Perkongsian aplikasi Vue lebih mudah ; dan dengan menggunakan Vuex, data awam boleh disimpan di kedai, menjadikan komunikasi antara komponen lebih mudah dan lebih cekap.

Atas ialah kandungan terperinci Panduan lengkap untuk melaksanakan komunikasi komponen dalam Vue2.x (props, $emit, Vuex). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!