목록, 테이블, 양식 등과 같은 구성 요소를 재사용하기 위해 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

재사용 가능한 구성 요소 구현

이제 목록 구성 요소를 예로 들어 믹스인을 사용하여 재사용 가능한 구성 요소를 구현하는 방법을 살펴보겠습니다.

먼저 목록 데이터 믹스인을 생성할 수 있습니다(모든 목록 구성요소가 데이터를 사용해야 한다고 가정). listDataMixin이라는 이름의 믹스인을 생성합니다.

rrreee

여기, listDataMixin 코드 >는 데이터, 계산된 속성 및 메서드를 포함하는 객체를 정의합니다. 여기서: 🎜

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

🎜위는 Mixin의 일반적인 목록 데이터입니다. 이 Mixin의 속성과 메서드는 재사용이 가능합니다. 다음 코드를 사용하여 이 Mixin을 목록 구성 요소에 추가할 수 있습니다. 🎜rrreee🎜 listDataMixin Mixin을 구성 요소에 추가했으며 구성 요소가 공개 데이터 및 공용 서비스를 통해 구성요소 재사용이 가능해집니다. 🎜🎜필드와 메서드를 공개로 유지하면서 다른 시나리오에 적합한 특정 기능을 얻기 위해 다른 구성 요소에 동일한 Mixin을 다시 추가할 수 있습니다. 이를 통해 코드 재사용률을 크게 향상시킬 수 있습니다. 🎜🎜요약🎜🎜이 글에서는 믹스인을 사용하여 Vue.js에서 공통 기능 부분을 재사용하는 방법과 이러한 기능을 목록 구성 요소에 적용하는 방법을 소개했습니다. 믹스인을 사용하면 구성 요소 논리를 공유하고 재사용 가능한 코드 기반을 구축할 수 있으므로 확장성, 유지 관리성 및 코드 복제가 향상됩니다. 더 강력한 웹 애플리케이션 구축을 시작할 수 있도록 믹스인을 사용하는 방법에 대한 몇 가지 아이디어를 제공하였기를 바랍니다. 🎜

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