목록, 테이블, 양식 등과 같은 구성 요소를 재사용하기 위해 Vue에서 믹스인을 사용하는 팁

Vue는 현대적이고 효율적인 웹 애플리케이션을 구축하기 위한 많은 강력한 기능과 도구를 갖춘 인기 있는 JavaScript 프레임워크입니다. 그 중 하나가 믹스인입니다. Mixin은 Vue의 고급 메커니즘으로, 컴포넌트에서 재사용 가능한 기능 부분을 추출하여 이러한 기능을 효과적으로 재사용할 수 있도록 해줍니다. 이는 목록, 테이블, 양식과 같은 공통 컴포넌트를 개발할 때 매우 유용합니다.

Mxin 작동 방식

mixin은 객체를 복사하는 것으로 이해될 수 있습니다. 믹스인 객체를 다른 객체에 복사하여 두 객체를 새로운 객체로 병합할 수 있습니다. Vue 구성 요소에 mixin 객체를 추가하면 mixin 객체의 모든 속성과 메서드가 구성 요소에 복사됩니다. 또한 mixin 개체와 구성 요소의 속성이나 메서드가 동일한 경우 구성 요소의 속성이나 메서드는 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');
    }
  }
});

이 예에서는 Vue 구성 요소를 만들고 혼합합니다. myMixin을 mixins 속성을 ​​통해 구성 요소에 추가하면 구성 요소가 myMixin 및 데이터</code를 갖게 됩니다. >메서드 속성. 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

rrreee

• 🎜data 부분은 일반 목록 관련 기본 데이터를 정의합니다: 🎜
  • list: 현재 페이지의 데이터 나열;
  • currentPage: 현재 페이지 번호;
  • pageSize: 방법 각 페이지에는 많은 레코드가 표시됩니다;
  • total: 총 레코드 수;
• 계산은 총 페이지 수를 가져오고 Math.ceil;
• 🎜을 통해 계산되는 값 계산 속성 totalPage를 부분적으로 정의합니다. 메소드 섹션은 일반적으로 사용되는 작업 메소드를 정의합니다: 🎜
  • getItems(): 현재 페이지 데이터를 가져옵니다.
  • changePage(pageNumber) : 페이지를 전환하고 페이지 번호 매개변수를 전달합니다.
  • refreshList(): 목록 데이터를 새로 고칩니다.
• mounted 부분은 refreshList() 메서드를 실행하여 요청된 데이터를 자동으로 가져오고 페이지를 렌더링하기 전에 목록을 새로 고칩니다.

위 내용은 목록, 테이블, 양식 등과 같은 구성 요소를 재사용하기 위해 Vue에서 믹스인을 사용하는 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!