Tips for using mixins in Vue to reuse components such as lists, tables, forms, etc.

Vue is a popular JavaScript framework with many powerful features and tools for building modern, efficient web applications. One of them is mixins. Mixin is an advanced mechanism in Vue. It allows us to extract reusable functional parts from components so that these functions can be effectively reused. This is very useful when we develop common components such as lists, tables, and forms. it works.

How Mxin works

Mixin can be understood as the copying of objects. We can copy a mixin object into another object, thereby merging the two objects into a new object. When we add a mixin object to a Vue component, all properties and methods in the mixin object will be copied to the component. In addition, if the mixin object and the component have the same properties or methods, the component's properties or methods will override the same properties or methods in the mixin object.

You can create a mixin through the following code:

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

Mixins are usually mixed in components. You can add mixin to a component through the following code:

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

In this example, we create a Vue component and mix myMixin into the component through the mixins attribute, so that the component has myMixin Declared data and methods attributes.

Implementing reusable components

Now, let’s take the list component as an example to discuss how to use mixin to implement reusable components.

First we can create a list data mixin (assuming that all list components need to use data), we create a mixin named 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 defines an object containing data, calculated properties and methods, among which:

• data part defines common list-related Basic data:

  • list: list data of the current page;
  • currentPage: current page number;
  • pageSize: How many records are displayed on each page;
  • total: How many records are there in total;
• ##computed Partially defined value calculation attribute totalPage, this attribute obtains the total number of pages, calculated through Math.ceil;

• methods The section defines common operation methods:

  • getItems(): Get the current page data;
  • changePage(pageNumber): Switch the page, pass in the page number parameter;
  • refreshList(): Refresh the list data;
• mounted part Execute the refreshList() method to automatically obtain the request data and refresh the list before rendering the page.

The above is a general list data Mixin. The properties and methods in this Mixin can be reused. You can add this Mixin to your list component with the following code:

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

We added

listDataMixin Mixin in the component, and the fields and methods are defined in this Mixin. Provides public data and public services for our components, thereby realizing component reuse.

We can add the same Mixin again in other components to obtain specific functionality suitable for other scenarios while maintaining public fields and methods. This can greatly improve the code reuse rate.

Summary

In this article, we introduced how to use mixins to reuse common functional parts in Vue.js and how to apply these functions to list components. Mixins allow us to share component logic and build reusable code bases, thereby improving our scalability, maintainability, and code duplication. We hope to have given you some ideas on how to use mixins so you can start building more powerful web applications.

The above is the detailed content of Tips for using mixins in Vue to reuse components such as lists, tables, forms, etc.. For more information, please follow other related articles on the PHP Chinese website!