Vue でミックスインを使用してリスト、テーブル、フォームなどのコンポーネントを再利用するためのヒント。

Vue は、最新の効率的な Web アプリケーションを構築するための強力な機能とツールを多数備えた人気の JavaScript フレームワークです。その 1 つがミックスインです。 Mixin は Vue の高度なメカニズムです。これにより、コンポーネントから再利用可能な機能部分を抽出して、これらの機能を効果的に再利用できるようになります。これは、リスト、テーブル、フォームなどの共通コンポーネントを開発するときに非常に役立ちます。

Mxin の仕組み

Mixin はオブジェクトのコピーとして理解でき、mixin オブジェクトを別のオブジェクトにコピーすることで、2 つのオブジェクトを新しいオブジェクトにマージできます。 mixin オブジェクトを Vue コンポーネントに追加すると、mixin オブジェクト内のすべてのプロパティとメソッドがコンポーネントにコピーされます。さらに、ミックスイン オブジェクトとコンポーネントが同じプロパティまたはメソッドを持つ場合、コンポーネントのプロパティまたはメソッドは、ミックスイン オブジェクト内の同じプロパティまたはメソッドをオーバーライドします。

次のコードを通じてミックスインを作成できます:

const myMixin = {
  data() {
    return {
      message: 'Hello, mixin!'
    }
  },
  methods: {
    foo() {
      console.log('foo');
    }
  }
};

ミックスインは通常、コンポーネントに混合されます。次のコードを通じてミックスインをコンポーネントに追加できます:

const Component = Vue.extend({
  mixins: [myMixin],
  data() {
    return {
      anotherMessage: 'Hello, component!'
    }
  },
  methods: {
    bar() {
      console.log('bar');
    }
  }
});

Inこの例では、Vue コンポーネントを作成し、mixins 属性を使用して myMixin をコンポーネントにミックスします。これにより、コンポーネントには myMixin 宣言された data## が含まれます。 # 属性と methods 属性。

再利用可能なコンポーネントの実装

次に、リスト コンポーネントを例として、mixin を使用して再利用可能なコンポーネントを実装する方法を説明します。

まず、リスト データ ミックスインを作成できます (すべてのリスト コンポーネントがデータを使用する必要があると想定)。

listDataMixin:

export default {
  data: function() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    getItems() {},
    changePage() {},
    refreshList() {}
  },
  mounted() {
    this.refreshList();
  }
};

Here , ## という名前のミックスインを作成します。 #listDataMixin

は、データ、計算されたプロパティおよびメソッドを含むオブジェクトを定義します。

• data

  部分は、共通のリスト関連の基本データを定義します。

  list
  : 現在のページのリストデータ;
  • currentPage
  : 現在のページ番号;
  • pageSize
  : 各ページに表示されるレコードの数;
  • total
  : 合計で存在するレコードの数;
  ##computed
  部分的に定義された値計算属性
totalPage
• 。この属性は、Math.ceil;メソッドを通じて計算された合計ページ数を取得します。
セクションでは一般的な操作メソッドを定義します:

• getItems()

  : 現在のページ データを取得します;
  • changePage(pageNumber) : ページを切り替え、ページ番号パラメータを渡します;
  • refreshList(): リスト データを更新します;
  mounted
  の部分
refreshList()
• メソッドを実行して、リクエスト データを自動的に取得し、ページをレンダリングする前にリストを更新します。 上記は一般的なリストデータの Mixin ですが、この Mixin のプロパティとメソッドは再利用できます。次のコードを使用して、この Mixin をリスト コンポーネントに追加できます:

  <template>
    <div>
      <table>
        <thead>
          <tr>
            <th>表头</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ item }}</td>
          </tr>
        </tbody>
      </table>
      <div class="pagination">
        <a v-if="currentPage > 1" @click="changePage(currentPage - 1)">上一页</a>
        <a v-for="pageNumber in totalPage" :key="pageNumber" :class="{ active: pageNumber === parseInt(currentPage) }" @click="changePage(pageNumber)">{{ pageNumber }}</a>
        <a v-if="currentPage < totalPage" @click="changePage(currentPage + 1)">下一页</a>
      </div>
    </div>
  </template>
  
  <script>
  import listDataMixin from '../mixin/listDataMixin';
  
  export default {
    mixins: [listDataMixin],
    methods: {
      getItems() {},
      changePage() {},
      refreshList() {}
    }
  };
  </script>

  コンポーネントに listDataMixin

  Mixin を追加しました。フィールドとメソッドはこの Mixin で定義されています。公開データとメソッドを提供します。コンポーネントのパブリック サービスにより、コンポーネントの再利用が実現します。

  同じ Mixin を他のコンポーネントに再度追加して、パブリック フィールドとメソッドを維持しながら、他のシナリオに適した特定の機能を取得できます。これにより、コードの再利用率が大幅に向上します。 概要

  この記事では、ミックスインを使用して Vue.js の共通の機能部分を再利用する方法と、これらの機能をリスト コンポーネントに適用する方法を紹介しました。ミックスインを使用すると、コンポーネント ロジックを共有し、再利用可能なコード ベースを構築できるため、スケーラビリティ、保守性、およびコードの重複が向上します。より強力な Web アプリケーションの構築を開始できるように、ミックスインの使用方法についていくつかのアイデアを提供できれば幸いです。

  以上がVue でミックスインを使用してリスト、テーブル、フォームなどのコンポーネントを再利用するためのヒント。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。