Berapa banyak cara yang ada untuk menghantar nilai dalam Vue?

Vue ialah rangka kerja JavaScript popular yang biasa digunakan untuk membina antara muka pengguna dan aplikasi web satu halaman. Dalam aplikasi Vue, pemindahan data antara komponen adalah sangat penting. Vue menyediakan pelbagai kaedah lulus nilai untuk berkongsi data antara komponen. Artikel ini akan memperkenalkan secara terperinci kaedah lulus nilai dalam Vue.

1. props

props ialah salah satu kaedah yang paling biasa digunakan untuk menghantar nilai dalam Vue dan sangat mudah difahami. Ia membolehkan komponen induk menghantar data kepada komponen anak. Dalam Vue, komponen juga boleh digunakan seperti teg HTML. Di bawah ialah contoh yang menunjukkan cara menghantar data menggunakan prop.

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

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

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

Dalam contoh ini, kami menggunakan sintaks :title="message" untuk menghantar mesej data dalam komponen induk kepada komponen anak sebagai prop. Dalam komponen kanak-kanak, kami boleh menerima prop ini melalui kata kunci props.

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

<script>
export default {
  props: ['title'],
}
</script>

menerima prop ini melalui props: ['title'] dalam komponen anak dan memaparkannya dalam templat.

2. Emit

emit membolehkan komponen anak menghantar data kepada komponen induk. Untuk menggunakan emit, anda perlu mencetuskan acara tersuai menggunakan kaedah $emit dalam komponen anak dan mendengar acara ini dalam komponen induk. Berikut ialah contoh penggunaan emit untuk menghantar data.

<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 sampel ini, apabila butang diklik, kaedah increment akan dipanggil dan kaedah this.$emit akan dipanggil untuk mencetuskan 'kenaikan' acara tersuai. Kami boleh membawa data sekiranya berlaku, di sini kami lulus kiraan sebagai pilihan kepada komponen induk.

<template>
  <div>
    <child-component @increment="incrementCount"></child-component>
  </div>
</template>

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

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

Dalam templat komponen induk, kami menggunakan sintaks @increment="incrementCount" untuk mendengar peristiwa tersuai dalam komponen anak Apabila komponen anak mencetuskan acara 'kenaikan', kami memanggil kaedah incrementCount untuk mengemas kini status komponen induk.

3. Vuex

Vuex ialah corak pengurusan keadaan yang dibangunkan khusus untuk aplikasi Vue. Ia menyediakan pusat pengurusan negeri global dan menggunakan beberapa corak pengurusan keadaan biasa, seperti keadaan, pengambil, mutasi, tindakan, dsb.

Kelebihan menggunakan Vuex ialah ia menyediakan repositori pusat untuk memindahkan data, yang boleh menjadikan keadaan aplikasi lebih terkawal dan boleh diselenggara. Dalam Vuex, keadaan boleh dihantar kepada komponen melalui kedai.

Berikut ialah contoh Vuex yang mudah Di kedai, kami mentakrifkan kiraan pembolehubah dan mendedahkan mutasi increment, yang boleh mengemas kini status kiraan.

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    },
  },
})

export default store

Dalam komponen kita boleh menggunakan $store untuk mengakses keadaan dan operasi dalam repositori Vuex Berikut ialah contoh penggunaan Vuex untuk mengemas kini keadaan.

<template>
  <div>
    <h1>{{ $store.state.count }}</h1>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment', 1)
    },
  },
}
</script>

Dalam contoh kod ini, apabila butang diklik, kaedah increment dipanggil dan kaedah this.$store.commit dipanggil untuk menghantar data kepada mutasi kenaikan dalam repositori Vuex untuk mengemas kini keadaan.

4. Provide/Inject

Provide/Inject menyediakan cara komunikasi komponen yang membolehkan anda berkongsi data dengan mudah antara semua komponen keturunan dalam rantaian. Ia membolehkan komponen induk menyediakan data dan komponen turunan menggunakan data tersebut.

Dalam komponen induk, kami menyediakan data melalui atribut provide.

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      message: 'Hello from parent component.',
    }
  },
}
</script>

Dalam contoh ini, kami menggunakan provide untuk menyediakan mesej data dan menghantarnya kepada komponen anak. Dalam komponen kanak-kanak, kita boleh menggunakan inject untuk menyuntik data ini.

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

<script>
export default {
  inject: ['message'],
}
</script>

Dalam contoh ini, kami menggunakan inject untuk menyuntik data mesej yang disediakan oleh komponen induk dan memaparkannya dalam templat.

Ringkasan

Di atas meringkaskan empat kaedah lulus nilai biasa dalam Vue: props, emit, Vuex dan Provide / Inject. Setiap kaedah lulus nilai mempunyai senario yang berkenaan dan penggunaan standardnya. Memahami kaedah pemindahan nilai ini akan membantu anda memahami dengan lebih baik pemindahan data antara komponen Vue. Kita boleh memilih dan menggabungkan kaedah pemindahan nilai ini mengikut keperluan sebenar untuk mencapai perkongsian data dalam aplikasi Vue.

Atas ialah kandungan terperinci Berapa banyak cara yang ada untuk menghantar nilai dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!