Vue dan Vue-Router: Bagaimana untuk berkongsi data antara komponen?

Vue dan Vue-Router: Bagaimana hendak berkongsi data antara komponen?

Pengenalan:
Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Vue-Router ialah pengurus penghalaan rasmi Vue, digunakan untuk melaksanakan aplikasi satu halaman. Dalam aplikasi Vue, komponen ialah unit asas untuk membina antara muka pengguna. Dalam banyak kes kita perlu berkongsi data antara komponen yang berbeza. Artikel ini akan memperkenalkan beberapa kaedah untuk membantu anda mencapai perkongsian data dalam Vue dan Vue-Router, serta contoh kod khusus.

Pembolehubah global:
Cara paling mudah dalam Vue ialah menggunakan pembolehubah global untuk berkongsi data. Anda boleh menentukan data yang perlu dikongsi sebagai sifat pada tika Vue. Dengan cara ini data akan kelihatan dalam semua komponen. Berikut ialah contoh mudah:

// main.js
import Vue from 'vue'
Vue.prototype.$sharedData = { name: 'John' }

// App.vue
<template>
  <div>
    <h1>{{ $sharedData.name }}</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <h2>{{ $sharedData.name }}</h2>
  </div>
</template>

Dengan mentakrifkan $sharedData pada prototaip Vue, kami boleh mengakses data yang dikongsi dalam mana-mana komponen melalui this.$sharedData . $sharedData，我们可以在任意组件中通过this.$sharedData来访问共享的数据。

Vuex：
如果你的应用需要更复杂的状态管理，Vue官方提供了一个强大的状态管理模式和库——Vuex。Vuex将所有共享的数据集中管理，通过store对象来访问数据。以下是一个使用Vuex的示例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    name: 'John'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  actions: {
    updateNameAsync({ commit }, payload) {
      setTimeout(() => {
        commit('updateName', payload)
      }, 1000)
    }
  },
  getters: {
    getName: state => {
      return state.name
    }
  }
})

export default store

// App.vue
<template>
  <div>
    <h1>{{ $store.state.name }}</h1>
    <button @click="updateName">更新名字</button>
    <ChildComponent></ChildComponent>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['updateName']),
  }
}
</script>

// ChildComponent.vue
<template>
  <div>
    <h2>{{ $store.state.name }}</h2>
  </div>
</template>

在这个示例中，我们使用Vuex创建了一个store对象。store中的state对象存储共享的数据。mutations对象定义了更新数据的方法，actions对象定义了异步更新数据的方法。getters对象定义了获取数据的方法。在组件中，我们可以通过this.$store.state来获取共享的数据，并通过commit方法调用mutations中的方法来更新数据。

通过props传递数据：
在Vue中，组件之间可以通过props来传递数据。这是一种常见的组件通信方式，特别适用于父子组件之间。以下是一个使用props传递数据的示例：

// App.vue
<template>
  <div>
    <h1>{{ name }}</h1>
    <ChildComponent :name="name"></ChildComponent>
  </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <h2>{{ name }}</h2>
  </div>
</template>
<script>
export default {
  props: ['name']
}
</script>

在这个示例中，我们在父组件中通过:name="name"

Vuex:

Jika aplikasi anda memerlukan pengurusan negeri yang lebih kompleks, Vue secara rasmi menyediakan model dan perpustakaan pengurusan negeri yang berkuasa - Vuex. Vuex mengurus semua data yang dikongsi secara berpusat dan mengakses data melalui objek kedai. Berikut ialah contoh menggunakan Vuex:
rrreee

Dalam contoh ini, kami mencipta objek kedai menggunakan Vuex. Objek keadaan dalam kedai menyimpan data kongsi. Objek mutasi mentakrifkan kaedah untuk mengemas kini data, dan objek tindakan mentakrifkan kaedah untuk mengemas kini data secara tak segerak. Objek getters mentakrifkan kaedah untuk mendapatkan data. Dalam komponen, kita boleh mendapatkan data yang dikongsi melalui this.$store.state dan memanggil kaedah dalam mutasi melalui kaedah commit untuk mengemas kini data. 🎜🎜Pindahkan data melalui prop: 🎜Dalam Vue, data boleh dihantar antara komponen melalui prop. Ini adalah kaedah komunikasi komponen biasa, terutamanya sesuai antara komponen ibu bapa dan anak. Berikut ialah contoh menghantar data menggunakan prop: 🎜rrreee🎜 Dalam contoh ini, kami menghantar atribut nama kepada komponen anak melalui :name="name" dalam komponen induk. Komponen kanak-kanak menerima data melalui atribut props dan memaparkannya pada halaman. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan beberapa kaedah untuk mencapai perkongsian data antara komponen dalam Vue dan Vue-Router. Melalui pembolehubah global, Vuex dan prop, kita boleh memilih cara yang sesuai untuk berkongsi data mengikut keperluan aplikasi. Semoga contoh-contoh ini berguna kepada anda. 🎜

Atas ialah kandungan terperinci Vue dan Vue-Router: Bagaimana untuk berkongsi data antara komponen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!