Bagaimana untuk mendapatkan data luaran dalam vue

Vue ialah rangka kerja JavaScript yang sangat popular yang membolehkan kami membina antara muka web yang elegan dan responsif. Menggunakan Vue dalam aplikasi kami, kami perlu mengikat data pada templat, yang membolehkan kami mengemas kini elemen DOM tanpa memuat semula halaman. Artikel ini bertujuan untuk memperkenalkan cara Vue mengendalikan data luaran.

Vue menyediakan konsep yang dipanggil "komponen", yang membolehkan kami menggabungkan blok kod yang boleh digunakan semula dalam aplikasi kami. Setiap komponen mempunyai data dan tingkah laku sendiri dan boleh berinteraksi dengan mudah dengan komponen lain. Jadi, apa yang kita lakukan apabila data kita tiada dalam komponen?

Vue menyediakan dua cara utama untuk mengendalikan data luaran: Prop dan Vuex.

1. Prop

Prop ialah cara untuk memindahkan data antara komponen dalam Vue. Ia membolehkan kami menghantar data daripada komponen induk kepada komponen anak. Komponen kanak-kanak boleh menggunakan data ini sebagai sifat mereka sendiri dan mengemas kininya mengikut keperluan.

Apabila menggunakan Prop, kita perlu mengisytiharkan data yang perlu kita terima dalam komponen. Ini boleh dicapai dengan menambahkan atribut prop pada komponen. Berikut ialah contoh menerima Prop bernama "message":

Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

Kita boleh menghantar data kepada komponen di mana ia digunakan, contohnya:

<my-component message="Hello, world!"></my-component>

komponen lihat ini sifat mesej dan boleh menggunakannya untuk memaparkan mesej yang dikehendaki.

2. Vuex

Vuex ialah perpustakaan pengurusan negeri rasmi Vue, yang membolehkan kami berkongsi data sepanjang aplikasi. Vuex menggunakan repositori pusat yang dipanggil "kedai" untuk menyimpan keadaan aplikasi anda. Komponen boleh mendapatkan keadaan daripada kedai dan boleh mengemas kininya.

Apabila menggunakan Vuex, kita perlu mentakrifkan kedai terlebih dahulu. Ini boleh dicapai dengan mencipta objek yang mengandungi keadaan aplikasi dan keadaan kemas kini. Berikut ialah contoh mudah:

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

Apabila menggunakan Vuex dalam komponen, kita perlu mengimport kedai itu terlebih dahulu. Ini boleh dicapai dengan menambah yang berikut dalam komponen:

import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}

Kita boleh menggunakan sifat yang dikira untuk mendapatkan keadaan daripada kedai, contohnya:

<p>Count: {{ count }}</p>

Kita juga boleh menggunakan kaedah untuk Kemas kini status, contohnya:

<button v-on:click="increment">Increment</button>

Apabila butang diklik, memanggil kaedah kenaikan akan mengemas kini status.

Untuk meringkaskan, Vue menyediakan dua cara utama untuk mengendalikan data luaran: Prop dan Vuex. Props membolehkan kami menghantar data daripada komponen induk kepada komponen anak dan mengemas kininya mengikut keperluan. Vuex membolehkan kami berkongsi data sepanjang aplikasi dan mengemas kininya di mana-mana sahaja. Bergantung pada senario aplikasi tertentu, kami boleh memilih cara yang sesuai untuk memproses data luaran.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan data luaran dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!