Petua untuk menggunakan mixin dalam Vue untuk menggunakan semula komponen seperti senarai, jadual, borang, dsb.

Vue ialah rangka kerja JavaScript yang popular dengan banyak ciri dan alatan berkuasa untuk membina aplikasi web yang moden dan cekap. Salah satunya ialah mixin. Mixin ialah mekanisme lanjutan dalam Vue Ia membolehkan kami mengekstrak bahagian berfungsi yang boleh digunakan semula daripada komponen supaya fungsi ini boleh digunakan semula dengan berkesan. Ini sangat berguna apabila kami membangunkan komponen biasa seperti senarai, jadual dan borang.

Cara Mxin berfungsi

mixin boleh difahami sebagai penyalinan objek Kita boleh menyalin objek mixin ke objek lain, dengan itu menggabungkan dua objek menjadi objek baharu. Apabila kita menambah objek mixin pada komponen Vue, semua sifat dan kaedah dalam objek mixin akan disalin ke komponen. Selain itu, jika objek mixin dan komponen mempunyai sifat atau kaedah yang sama, sifat atau kaedah komponen akan mengatasi sifat atau kaedah yang sama dalam objek mixin.

Anda boleh membuat mixin melalui kod berikut:

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

Mixin biasanya dicampur dalam komponen Anda boleh menambah mixin pada komponen melalui kod berikut:

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

Dalam contoh ini, kami mencipta komponen Vue , dan campurkan. myMixin ke dalam komponen melalui atribut mixins, supaya komponen mempunyai data</code yang diisytiharkan dalam <code>myMixin > dan kaedah atribut. myMixin 通过 mixins 属性混合到组件中，这样组件中就具有了 myMixin 中声明的 data 和 methods 属性。

实现复用组件

现在，我们以列表组件为例，来探讨如何使用 mixin 实现复用组件。

首先我们可以创建一个列表数据 mixin（假定所有列表组件都需要用到数据），我们创建一个名为 listDataMixin 的 mixin：

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

在这里，listDataMixin 定义了一个包含数据、计算属性和方法的对象，其中：

• data 部分定义了通用的列表相关的基本数据:

  • list：当前页的列表数据;
  • currentPage：当前页数;
  • pageSize：每页显示多少条记录;
  • total：共有多少条记录;
• computed 部分定义值计算属性 totalPage，该属性获取了总页数，通过 Math.ceil 计算获得;

• methods 部分定义了常用的操作方法：

  • 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

Melaksanakan komponen boleh guna semula

Sekarang, mari kita ambil komponen senarai sebagai contoh untuk membincangkan cara menggunakan mixin untuk melaksanakan komponen boleh guna semula.

Mula-mula kita boleh mencipta campuran data senarai (dengan mengandaikan bahawa semua komponen senarai perlu menggunakan data), kita mencipta campuran bernama listDataMixin:

rrreee

Di sini, kod listDataMixin > mentakrifkan objek yang mengandungi data, sifat dan kaedah yang dikira, di mana: 🎜

• 🎜data bahagian mentakrifkan data asas berkaitan senarai umum: 🎜
  • list: senaraikan data halaman semasa;
  • currentPage: nombor halaman semasa;
  • pageSize: Bagaimana banyak rekod dipaparkan pada setiap halaman;
  • jumlah: Berapakah jumlah keseluruhan rekod;
• dikira mentakrifkan sebahagian atribut pengiraan nilai <code>totalPage, yang memperoleh jumlah halaman dan dikira melalui Math.ceil;
• 🎜 Bahagian Kaedah mentakrifkan kaedah operasi yang biasa digunakan: 🎜
  • getItems(): Dapatkan data halaman semasa;
  • changePage(pageNumber) : Tukar halaman dan masukkan parameter nombor halaman;
  • refreshList(): Muat semula data senarai;
• Bahagian mounted melaksanakan kaedah refreshList() untuk mendapatkan data yang diminta secara automatik dan memuat semula senarai sebelum memaparkan halaman.

🎜Di atas adalah data senarai umum Mixin Sifat dan kaedah dalam Mixin ini boleh digunakan semula. Anda boleh menambah Mixin ini pada komponen senarai anda dengan kod berikut: 🎜rrreee🎜 Kami menambahkan listDataMixin Mixin dalam komponen, dan medan dan kaedah ditakrifkan dalam Mixin ini untuk Komponen kami menyediakan data awam dan perkhidmatan awam, dengan itu membolehkan penggunaan semula komponen. 🎜🎜Kami boleh menambah Mixin yang sama sekali lagi dalam komponen lain untuk mendapatkan fungsi khusus yang sesuai untuk senario lain sambil memastikan medan dan kaedah awam. Ini boleh meningkatkan kadar penggunaan semula kod dengan sangat baik. 🎜🎜Ringkasan🎜🎜Dalam artikel ini, kami memperkenalkan cara menggunakan mixin untuk menggunakan semula bahagian berfungsi biasa dalam Vue.js dan cara menggunakan fungsi ini untuk menyenaraikan komponen. Mixin membolehkan kami berkongsi logik komponen dan membina asas kod boleh guna semula, dengan itu meningkatkan kebolehskalaan, kebolehselenggaraan dan pertindihan kod kami. Kami berharap dapat memberi anda beberapa idea tentang cara menggunakan mixin supaya anda boleh mula membina aplikasi web yang lebih berkuasa. 🎜

Atas ialah kandungan terperinci Petua untuk menggunakan mixin dalam Vue untuk menggunakan semula komponen seperti senarai, jadual, borang, dsb.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!