Pengenalan kepada kaedah melaksanakan aliran data sehala dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript popular yang menggunakan model aliran data sehala untuk mengawal penghantaran data dan komunikasi antara komponen. Dalam rangka kerja Vue, data hanya boleh dihantar daripada komponen induk kepada komponen anak dan komponen anak tidak boleh mengubah suai data komponen induk secara langsung. Corak ini menjadikan kod lebih boleh diselenggara, boleh dipercayai dan mudah digunakan semula.

Artikel ini akan memperkenalkan kaedah melaksanakan aliran data sehala dalam dokumen Vue.

1. Penghantaran prop

Prop ialah salah satu kaedah utama untuk melaksanakan aliran data sehala dalam rangka kerja Vue. Dalam Vue, kita boleh menggunakan Props untuk menghantar data daripada komponen induk kepada komponen anak. Atribut Prop yang diterima oleh komponen anak ialah baca sahaja Ia tidak boleh mengubah suai data komponen induk dan hanya boleh berkomunikasi dengan komponen induk melalui peristiwa pancaran.

Gunakan arahan v-bind dalam komponen induk untuk menghantar data kepada komponen anak:

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      title: 'Hello, Vue!'
    }
  }
}
</script>

Pilihan props dalam komponen anak menerima data daripada komponen induk:

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  props: {
    title: String
  }
}
</script>

di atas Dalam kod, atribut tajuk ditakrifkan sebagai Jenis String, yang bermaksud bahawa pengesahan dan penukaran jenis dikendalikan oleh Vue. Tajuk yang diluluskan tidak boleh diubah suai dalam subkomponen, dan hanya boleh digunakan untuk operasi pengiraan atau paparan.

2. Acara tersuai

Dalam rangka kerja Vue, komponen induk dan komponen anak berkomunikasi dengan menggunakan acara tersuai. Komponen anak boleh menggunakan kaedah $emit yang disediakan oleh Vue untuk mencetuskan peristiwa tersuai dan menghantar data kepada komponen induk Komponen induk boleh mendengar peristiwa yang dipancarkan oleh komponen anak melalui arahan v-on untuk menerima data.

Cetuskan acara tersuai dalam komponen anak:

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

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

Dengar acara tersuai dalam komponen induk:

<template>
  <child-component @increment="onIncrement"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    onIncrement(counter) {
      console.log(`Counter is ${ counter }`)
    }
  }
}
</script>

Dalam kod di atas, komponen anak mentakrifkan kenaikan Kaedah, di mana kaedah $emit digunakan untuk mencetuskan peristiwa tersuai kenaikan dan nilai pembilang dihantar kepada komponen induk sebagai parameter. Komponen induk mendengar peristiwa kenaikan yang terikat pada komponen anak melalui arahan v-on dan mentakrifkan kaedah onIncrement untuk menerima data yang diluluskan oleh komponen anak.

3. $attrs dan $listeners

Kadangkala, kami akan menggunakan peristiwa asli dalam komponen anak dalam komponen induk, seperti klik dan tukar acara. Untuk menjadikan acara ini berfungsi dengan betul, Vue menyediakan atribut khas: $attrs dan $listeners. $attrs membenarkan komponen anak menghantar semua atribut yang belum ditakrifkan oleh prop kepada komponen induk, manakala $listeners boleh menghantar semua peristiwa yang terikat oleh komponen anak (termasuk peristiwa asli dan peristiwa tersuai) kepada komponen induk.

Tentukan komponen dengan peristiwa asli dalam komponen anak:

<template>
  <input type="text" @input="$emit('change', $event.target.value)">
</template>

<script>
export default {}
</script>

Gunakan komponen anak dalam komponen induk dan ikat peristiwa asli:

<template>
  <child-component v-on="$listeners"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

Dalam kod di atas, komponen induk menggunakan arahan v-on untuk menghantar $pendengar kepada komponen anak, supaya komponen anak boleh menghantar peristiwa asli terikat dan peristiwa tersuai kepada komponen induk.

Ringkasan

Mod aliran data sehala dalam rangka kerja Vue menjadikan komunikasi antara komponen lebih jelas dan lebih dipercayai. Pemindahan data dan komunikasi antara komponen boleh dicapai menggunakan kaedah seperti Prop, acara tersuai dan $attrs/$pendengar. Menguasai kemahiran ini boleh membantu anda menggunakan rangka kerja Vue dengan lebih baik untuk membangunkan aplikasi yang memenuhi keperluan pengguna.

Atas ialah kandungan terperinci Pengenalan kepada kaedah melaksanakan aliran data sehala dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!