Synchronization method of vue list data

Vue is a progressive framework for building user interfaces and is one of the most popular frameworks in front-end development. In the development of Vue, synchronization of list data is a relatively complex issue. This article will introduce some synchronization methods of Vue list data.

1. Data transfer between components

In Vue, components are the basic units of code reuse and logical organization, and data transfer between components requires the use of props attributes and emit events. . In the synchronization of list data, the parent component passes the data to the child component through the props attribute. After the child component modifies the data, it passes the data to the parent component through the emit event, thereby realizing the synchronization of the list data.

When using props attributes, you need to pay attention to the following points:

1. The data declared by props in the component is not allowed to be modified directly by sub-components to avoid data confusion.
2. The parent component binds data to the props attribute through the v-bind directive, so that it can be used in the child component.
3. The child component triggers the event registered by the parent component through the $emit method and passes the modified data.

The sample code is as follows:

Parent component:

<template>
  <div>
    <child-component :list="list" @change="handleChange"></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    };
  },
  methods: {
    handleChange(newList) {
      this.list = newList;
    }
  },
  components: {
    ChildComponent
  }
};
</script>

Child component:

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    handleInputChange(item) {
      this.$emit('change', this.list);
    }
  }
};
</script>

In the above code, the parent component is passed through the props attribute The list data is given to the subcomponent. The v-for instruction is used to render the list data in the subcomponent. When the input box in the subcomponent changes, the change event registered by the parent component is triggered through the $emit method and the modified list data is passed. to the parent component.

2. Vuex state management

Vuex is the state management library officially provided by Vue. It realizes the function of sharing data and status between components by centrally storing and managing the state of all components of the application. . In the synchronization of list data, the sharing and synchronization of list data can be achieved through Vuex.

When using Vuex, you need to pay attention to the following points:

1. You need to introduce the Vuex library into the Vue application and register the store instance.
2. List data should be stored in the Vuex state.
3. Components can access and modify data in state through Vuex to achieve synchronization.

The sample code is as follows:

store.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    list: [
      { id: 1, name: 'Vue' },
      { id: 2, name: 'React' },
      { id: 3, name: 'Angular' }
    ]
  },
  mutations: {
    updateList(state, newList) {
      state.list = newList;
    }
  }
});

Parent component:

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

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

export default {
  components: {
    ChildComponent
  }
};
</script>

Child component:

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: mapState(['list']),
  methods: {
    ...mapMutations(['updateList']),
    handleInputChange(item) {
      this.updateList(this.list);
    }
  }
};
</script>

In the above code, the list array is defined in the state. The parent component no longer passes data to the child component. The child component obtains the list data in the state through the mapState function and renders the list data. When the input box in the subcomponent changes, the new list data is submitted to the updateList method in mutations through the mapMutations function, thereby updating the data in the state.

3. $emit and provide/inject

In the Vue2.2.0 version, a new API for provide/inject data provision and injection is added. Through this API, dynamic information between components can be realized. The ability to inject data. In the synchronization of list data, data sharing and synchronization can be achieved through provide/inject.

When using provide/injectAPI, you need to pay attention to the following points:

1. provide defines the data that needs to be shared, and inject declares the data that needs to be injected.
2. You can use the arrow function in provide to dynamically bind data to dynamically update the data after the data is updated.
3. It is not recommended to use responsive data in provide, which may cause unpredictability of data updates.

The sample code is as follows:

Parent component:

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

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

export default {
  provide() {
    return {
      list: this.list,
      updateList: (newList) => {
        this.list = newList;
      }
    }
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    };
  },
  components: {
    ChildComponent
  }
};
</script>

Child component:

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ['list', 'updateList'],
  methods: {
    handleInputChange(item) {
      this.updateList(this.list);
    }
  }
};
</script>

In the above code, the parent component provides the list through provide and updateList method to realize sharing and synchronization of list data. In the subcomponent, the list and updateList methods that need to be injected are declared through inject, so as to access and modify the list data.

Conclusion

Through the above three methods, Vue list data can be synchronized. In practical applications, different methods can be selected according to specific circumstances to achieve data synchronization. Among them, data transfer between components is the most basic and commonly used method, while Vuex and provide/inject are more suitable for state management and data sharing in large applications.

The above is the detailed content of Synchronization method of vue list data. For more information, please follow other related articles on the PHP Chinese website!