Kaedah pelaksanaan pemindahan data komponen dan pemindahan peristiwa dalam dokumentasi Vue

Vue ialah rangka kerja bahagian hadapan yang popular Ia mempunyai ciri komponen, membolehkan pembangun menguraikan halaman yang kompleks kepada beberapa modul kecil dan bebas. Dalam Vue, pemindahan data dan pemindahan peristiwa antara komponen adalah topik yang sangat penting Dalam artikel ini, kami akan memperkenalkan secara terperinci kaedah pelaksanaan pemindahan data komponen dan pemindahan peristiwa dalam Vue.

1. Pemindahan data komponen

Dalam Vue, pemindahan data komponen dibahagikan kepada dua kategori, satu pemindahan komponen induk kepada komponen anak, dan satu lagi pemindahan anak penghantaran komponen kepada induk.

1. Komponen induk menghantar data kepada komponen anak

Komponen induk perlu menggunakan pilihan prop untuk menghantar data kepada komponen anak ialah cara untuk komponen anak menerima data yang dihantar oleh komponen induk. Hantar data kepada komponen anak melalui v-bind: nama atribut dalam komponen induk, dan terima data melalui pilihan props dalam komponen anak.

Pertama lihat kod dalam komponen induk:

<template>
  <div>
    <child-component :title="title"></child-component>
  </div>
</template>

<script>
import ChildComponent from './child.vue'

export default {
  components: { ChildComponent },
  data () {
    return {
      title: 'this is the title'
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan komponen utama dan menghantar atribut tajuk kepada komponen kanak-kanak melalui komponen v-bind.

Kemudian lihat kod subkomponen:

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan subkomponen dan menerima atribut tajuk yang diluluskan oleh komponen induk melalui pilihan props.

2. Subkomponen menghantar data kepada komponen induk

Untuk menghantar data daripada subkomponen kepada komponen induk, anda perlu menggunakan kaedah $emit ialah cara untuk subkomponen menghantar data kepada induk komponen. Gunakan kaedah $emit dalam komponen anak untuk mencetuskan peristiwa tersuai dan lulus data yang perlu dihantar Dengar peristiwa tersuai ini dalam komponen induk melalui nama @event dan terima data yang diluluskan oleh komponen anak dalam fungsi tindak balas acara.

Lihat kod dalam subkomponen dahulu:

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
      this.$emit('increment', this.count)
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan subkomponen dan menggunakan kaedah $emit untuk mencetuskan kenaikan acara tersuai apabila butang diklik Dan lulus nilai kiraan semasa sebagai parameter kepada komponen induk.

Kemudian lihat kod komponen induk:

<template>
  <div>
    <h1 id="totalCount">{{ totalCount }}</h1>
    <child-component @increment="onChildIncrement"></child-component>
  </div>
</template>

<script>
import ChildComponent from './child.vue'

export default {
  components: { ChildComponent },
  data () {
    return {
      totalCount: 0
    }
  },
  methods: {
    onChildIncrement (count) {
      this.totalCount += count
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan komponen induk dan apabila mendengar peristiwa kenaikan komponen anak, lulus nilai kiraan sebagai parameter kepada Dalam fungsi respons onChildIncrement, dan kemas kini nilai totalCount dalam fungsi respons.

2. Penghantaran acara komponen

Dalam Vue, penghantaran acara antara komponen boleh dicapai melalui bas acara dan vuex.

1. Bas acara

Bas acara ialah kaedah penghantaran acara yang mudah, dan semua komponen boleh mendaftarkan acara atau mencetuskan acara ke bas acara. Dalam Vue, anda boleh menggunakan sifat Vue.prototype.$bus untuk mencipta bas acara.

Mari kita lihat dahulu cara menggunakan bas acara:

// main.js中创建事件总线
import Vue from 'vue'

Vue.prototype.$bus = new Vue()

// 在需要传递事件的组件中注册事件和触发事件
this.$bus.$emit('my-event', data)

this.$bus.$on('my-event', (data) => { ... })

Dalam kod di atas, kami mencipta bas acara melalui sifat Vue.prototype.$bus dalam fail main.js, dan kemudian dalam Dalam komponen yang perlu lulus acara, cetuskan acara tersuai acara saya melalui kaedah $emit, dan hantar data yang perlu dihantar sebagai parameter kepada fungsi tindak balas acara itu; perlu menerima acara, mendengar acara tersuai my- melalui kaedah $on, dan menerima data yang diluluskan dalam fungsi tindak balas acara.

2.vuex

vuex ialah penyelesaian pengurusan keadaan yang disyorkan secara rasmi. Ia meletakkan keadaan semua komponen dalam pepohon keadaan global Semua komponen boleh mengakses keadaan global daripada Dapatkan dan kemas kini status pokok itu. Dalam vuex, anda boleh menggunakan objek kedai untuk menyimpan keadaan global dan mengubah suai keadaan global melalui mutasi, tindakan dan pengambil.

Mari kita lihat dahulu cara menggunakan vuex:

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement (context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

// 在组件中使用vuex
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters([
      'doubleCount'
    ])
  },
  methods: {
    ...mapMutations([
      'increment'
    ]),
    ...mapActions([
      'asyncIncrement'
    ])
  }
}

Dalam kod di atas, kami mentakrifkan objek kedai yang menyimpan keadaan global dalam fail store.js dan menggunakan mutasi, tindakan dan getter untuk mengubah suai dan mendapatkan keadaan global; dalam komponen, memetakan keadaan, fungsi pengubahsuaian dan fungsi tindakan dalam stor melalui fungsi tambahan seperti mapState, mapMutations, mapActions dan mapGetters, dan menggunakannya dalam komponen.

Kesimpulan

Dalam Vue, pemindahan data dan pemindahan acara antara komponen adalah topik yang sangat penting Untuk senario dan keperluan yang berbeza, kita boleh menggunakan prop, $emit, bas acara dan vuex serta kaedah lain untuk. mencapai pemindahan data dan pemindahan peristiwa. Menguasai kemahiran ini membolehkan kami mengatur dan mengurus aplikasi Vue kami dengan lebih fleksibel.

Atas ialah kandungan terperinci Kaedah pelaksanaan pemindahan data komponen dan pemindahan peristiwa dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!