vueリストデータの同期方法-フロントエンドQ&A-php.cn

vueリストデータの同期方法

王林

リリース： 2023-05-11 09:31:36

オリジナル

1363 人が閲覧しました

Vue はユーザーインターフェイスを構築するための進歩的なフレームワークであり、フロントエンド開発で最も人気のあるフレームワークの 1 つです。 Vue の開発においてリストデータの同期は比較的複雑な問題ですが、この記事では Vue のリストデータの同期方法をいくつか紹介します。

1. コンポーネント間のデータ転送

Vue では、コンポーネントはコードの再利用と論理構成の基本単位であり、コンポーネント間のデータ転送には props 属性の使用とイベントの発行が必要です。リストデータの同期は、親コンポーネントがprops属性で子コンポーネントにデータを渡し、子コンポーネントがデータを変更した後、emitイベントで親コンポーネントにデータを渡すことでリストの同期を実現します。データ。

props 属性を使用する場合は、次の点に注意する必要があります。

コンポーネント内の props によって宣言されたデータは、サブコンポーネントによって直接変更することはできません。データの混乱を避けます。
親コンポーネントは、v-bind ディレクティブを通じてデータを props 属性にバインドし、子コンポーネントで使用できるようにします。
子コンポーネントは、$emit メソッドを通じて親コンポーネントによって登録されたイベントをトリガーし、変更されたデータを渡します。

サンプルコードは次のとおりです。

親コンポーネント:

<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>

ログイン後にコピー

子コンポーネント:

<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>

ログイン後にコピー

上記のコードでは、親コンポーネントprops 属性を介して渡されますリストデータはサブコンポーネントに与えられます v-for 命令は、サブコンポーネントでリストデータをレンダリングするために使用されますサブコンポーネントの入力ボックスが変更されると、親コンポーネントによって登録された変更イベントがトリガーされます$emit メソッドを通じて、変更されたリストデータが親コンポーネントに渡されます。

2. Vuex 状態管理

Vuex は、Vue が公式に提供する状態管理ライブラリで、Vue のすべてのコンポーネントの状態を一元的に保存、管理することで、コンポーネント間でデータやステータスを共有する機能を実現します。アプリケーションです。リストデータの同期では、Vuexを介してリストデータの共有と同期が実現できます。

Vuex を使用する場合は、次の点に注意する必要があります。

Vuex ライブラリを Vue アプリケーションに導入し、ストアインスタンスを登録する必要があります。
リストデータは Vuex 状態で保存する必要があります。
コンポーネントは、Vuex を介して状態のデータにアクセスして変更し、同期を実現できます。

サンプルコードは次のとおりです。

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;
    }
  }
});

ログイン後にコピー

親コンポーネント:

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

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

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

ログイン後にコピー

子コンポーネント:

<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>

ログイン後にコピー

上記のコードでは、ステートにリスト配列が定義されています。親コンポーネントは子コンポーネントにデータを渡しません。子コンポーネントは、mapState 関数を通じてステート内のリストデータを取得し、リストデータをレンダリングします。サブコンポーネントの入力ボックスが変更されると、新しいリストデータが、mapMutations 関数を介してミューテーションの updateList メソッドに送信され、それによって状態のデータが更新されます。

3. $emit と Provide/inject

Vue2.2.0 バージョンでは、Provide/Inject データの提供とインジェクションのための新しい API が追加され、この API を通じてコンポーネント間の動的な情報を共有することができます。データを注入する機能。リストデータの同期では、provide/injectによりデータの共有と同期が実現できます。

provide/injectAPI を使用する場合は、次の点に注意する必要があります。

provide は共有する必要があるデータを定義し、inject は共有する必要があるデータを宣言します。注射された。
provide のアロー関数を使用してデータを動的にバインドし、データの更新後にデータを動的に更新できます。
provide で応答性の高いデータを使用することはお勧めできません。データ更新が予測不能になる可能性があります。

サンプルコードは次のとおりです。

親コンポーネント:

<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>

ログイン後にコピー

子コンポーネント:

<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>

ログイン後にコピー

上記のコードでは、親コンポーネントProvide メソッドと updateList メソッドを通じてリストを提供し、リストデータの共有と同期を実現します。サブコンポーネントでは、リストデータにアクセスして変更するために、注入する必要がある list メソッドと updateList メソッドが inject を通じて宣言されます。

結論

上記の 3 つの方法で Vue リストデータを同期できますが、実際のアプリケーションでは、特定の状況に応じて異なる方法を選択してデータ同期を実現できます。このうち、コンポーネント間のデータ転送は最も基本的でよく使用される方法ですが、Vuex と Provide/Inject は大規模なアプリケーションでの状態管理やデータ共有に適しています。

以上がvueリストデータの同期方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。