Vue and Vue-Router: How to share data between components?

Vue and Vue-Router: How to share data between components?

Introduction:
Vue is a popular JavaScript framework for building user interfaces. Vue-Router is Vue's official routing manager, used to implement single-page applications. In Vue applications, components are the basic units for building user interfaces. In many cases we need to share data between different components. This article will introduce some methods to help you achieve data sharing in Vue and Vue-Router, as well as specific code examples.

Global variables:
The simplest way in Vue is to use global variables to share data. You can define the data that needs to be shared as properties on the Vue instance. This way the data will be visible in all components. Here is a simple example:

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

// App.vue
<template>
  <div>
    <h1 id="sharedData-name">{{ $sharedData.name }}</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <h2 id="sharedData-name">{{ $sharedData.name }}</h2>
  </div>
</template>

By defining $sharedData on Vue's prototype, we can access the share through this.$sharedData in any component The data.

Vuex:
If your application requires more complex state management, Vue officially provides a powerful state management model and library-Vuex. Vuex centrally manages all shared data and accesses data through store objects. The following is an example using 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 id="store-state-name">{{ $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 id="store-state-name">{{ $store.state.name }}</h2>
  </div>
</template>

In this example, we use Vuex to create a store object. The state object in the store stores shared data. The mutations object defines methods for updating data, and the actions object defines methods for asynchronously updating data. The getters object defines methods for obtaining data. In the component, we can obtain the shared data through this.$store.state, and call the methods in mutations through the commit method to update the data.

Transmitting data through props:
In Vue, data can be passed between components through props. This is a common component communication method, especially suitable between parent and child components. The following is an example of using props to pass data:

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

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

In this example, we pass the name attribute to the child component through :name="name" in the parent component. The child component receives data through the props attribute and displays it on the page.

Summary:
This article introduces several methods to achieve data sharing between components in Vue and Vue-Router. Through global variables, Vuex and props, we can choose the appropriate way to share data according to the needs of the application. Hope these examples are helpful to you.

The above is the detailed content of Vue and Vue-Router: How to share data between components?. For more information, please follow other related articles on the PHP Chinese website!