How Vue's keep-alive component implements data sharing between pages

Vue’s keep-alive component is a technology that can improve application performance. It can cache components to avoid repeated creation and destruction. More importantly, it can also implement of data sharing. In this article, we will introduce the role of the keep-alive component and how to use it to achieve data sharing.

What is the keep-alive component

keep-alive is an abstract component provided by Vue, which can store the components it contains in memory instead of each re-created. When the wrapped component appears in the view switch of keep-alive, the keep-alive component will retain its state instead of re-rendering.

keep-aliveAn important use of components is to achieve data sharing between pages. Normally, components between different routes are independent and data between them is not shared. However, sometimes we want some data to be shared between different pages. In this case, we can use the keep-alive component to achieve this.

How to use the keep-alive component to achieve data sharing

First, before using the keep-alive component, we need to wrap the components that need to share data in in the keep-alive tag. For example, we have two routes, namely Home and About. In these two pages, we want to be able to share an object named userInfo:

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: 'John',
        age: 28,
      },
    };
  },
};
</script>

In the above code, we define the userInfo object in the parent component and wrap it in the keep-alive component. In this way, we can access the userInfo object whether it is on the Home page or the About page.

Then, in the child component, we can use this.$root.userInfo to access the userInfo object in the parent component to achieve data sharing. For example, in the Home component, we can access and modify the userInfo object in the following way:

export default {
  data() {
    return {
      userInfo: this.$root.userInfo,
    };
  },
  methods: {
    updateName() {
      this.userInfo.name = 'Tom';
    },
  },
};

The same is true in the About component way to access shared data.

Sample Application

The following is a sample application that uses the keep-alive component to achieve data sharing. We created a simple user information management application, including two pages: Home and About. User information can be modified on the Home page, and user information can be displayed on the About page.

<template>
  <div>
    <h1>Home</h1>
    <input v-model="userInfo.name" />
    <input v-model="userInfo.age" />
    <button @click="updateInfo">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: this.$root.userInfo,
    };
  },
  methods: {
    updateInfo() {
      // Some API call to update user info
    },
  },
};
</script>

<template>
  <div>
    <h1>About</h1>
    <p>Name: {{ userInfo.name }}</p>
    <p>Age: {{ userInfo.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: this.$root.userInfo,
    };
  },
};
</script>

In the above code, we define the userInfo object in the parent component and share it with Home# through this.$root.userInfo ## and About components. In the Home page, we can modify the value of the userInfo object and view the updated value in the About page.

keep-alive Component is a very practical function in Vue, through which we can cache components and achieve data sharing between pages. In this article, we introduce how to use the keep-alive component to achieve data sharing and give a sample application. I hope this article can help you better understand and apply the keep-alive component.

The above is the detailed content of How Vue's keep-alive component implements data sharing between pages. For more information, please follow other related articles on the PHP Chinese website!