Vue 문서의 구성요소에 의해 전달되는 다양한 유형의 필터 함수의 예

프론트엔드 개발자로서 우리는 페이지를 구축하기 위해 Vue.js를 사용해야 하는 경우가 많습니다. Vue.js에서 컴포넌트는 매우 중요한 부분입니다. 구성 요소 간에 값을 전달하는 것은 매우 일반적인 요구 사항이며 값을 전달하는 방법에는 여러 가지가 있습니다. 이 기사에서는 Vue 문서의 구성 요소 값 전송과 다양한 유형의 필터 기능 사용에 중점을 둘 것입니다.

구성 요소에 값 전달

Vue.js에는 구성 요소 간에 값을 전달하는 여러 가지 방법이 있습니다.

1. props & Emit

props를 사용하여 상위 구성 요소에서 하위 구성 요소로 데이터를 전달합니다. 내보내기를 사용하면 하위 구성 요소의 데이터를 상위 구성 요소로 전달할 수 있습니다. 이 방법은 구성 요소 간의 양방향 통신에 자주 사용됩니다. 그리고 이 방법은 매우 편리합니다. props에 전달해야 하는 데이터를 정의하고 하위 구성 요소에서 $emit 메서드를 사용하여 이벤트를 트리거하기만 하면 됩니다.

2. provide & inject

provide & inject는 Vue.js2.2.0 버전에 추가된 API입니다. Provide를 사용하여 전달해야 하는 데이터를 정의하고 Inject를 사용하여 이 데이터를 구성 요소에 주입합니다. 이 방법은 여러 수준에 걸쳐 데이터를 전달하는 데 자주 사용됩니다.

3. $parent & $children

Vue.js의 컴포넌트 트리는 깊이 우선 순회 프로세스입니다. $parent를 사용하여 상위 구성 요소 인스턴스를 가져오고 $children을 사용하여 하위 구성 요소 인스턴스를 가져옵니다. 이 방법의 단점은 유연성이 부족하고 props & Emit 및 Provide & Inject만큼 편리하지 않다는 것입니다.

다양한 유형의 필터 기능

데이터를 필터링하거나 변환해야 할 때 Vue.js의 필터 기능을 사용할 수 있습니다. Vue.js에서는 다음 유형의 필터 함수가 제공됩니다.

1. 전역 필터 함수

전역 필터 함수는 Vue.filter() 메서드를 통해 정의됩니다. 일단 정의되면 모든 구성 요소에서 사용할 수 있습니다. 전역 필터 기능의 장점은 간단하고 일단 정의되면 여러 구성 요소에서 사용할 수 있다는 것입니다. 그러나 전역 필터 기능은 여러 번 인스턴스화되므로 필터링된 데이터가 많으면 성능이 저하될 수 있습니다.

2. 로컬 필터 기능

로컬 필터 기능은 컴포넌트에 정의되어 있습니다. 이 구성 요소 내부에서만 사용할 수 있습니다. 이 접근 방식의 장점은 구성 요소에서 한 번만 인스턴스화하면 되므로 성능이 향상된다는 것입니다. 단점은 매우 제한적이며 구성 요소 내에서만 사용할 수 있다는 것입니다.

3. 순수 함수 필터 기능

순수 함수 필터 기능은 특정 매개변수를 입력하고 특정 결과를 출력하는 것을 말하며, 이는 외부 상태의 영향을 받지 않습니다. 이 방법은 사용하기가 더 편리하고 일부 부작용을 피할 수 있습니다. 그러나 순수 함수 필터 함수는 원본 데이터를 변경할 수 없다는 점에 유의해야 합니다.

필터 함수의 예

예제를 통해 필터 함수의 사용법을 살펴보겠습니다. 이 예에서는 구성 요소를 정의하고 이 구성 요소에 배열을 전달한 다음 구성 요소 내부의 필터 함수를 사용하여 배열을 필터링합니다.

<template>
  <div>
    <ul>
      <li v-for="item in filteredData">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item % 2 === 0
      }).map(item => {
        return item * 2
      })
    }
  }
};
</script>

이 구성 요소는 배열 데이터를 전달하고 필터 기능을 통해 배열을 필터링합니다. 계산된 속성에서는 JavaScript의 필터 및 맵 메소드를 사용하여 배열의 짝수를 필터링하고 필터링된 데이터에 2를 곱했습니다. 마지막으로 필터링된 데이터를 표시하기 위해 구성 요소에 반환합니다.

요약

Vue.js는 다양한 요구 사항에 따라 다양한 개발 방법을 선택할 수 있는 다양한 구성 요소 값 전송 방법과 필터 기능을 제공합니다. 사용 중에 성능, 유연성, 코드 재사용성 등과 같은 요소를 종합적으로 고려하여 최상의 개발 방법을 결정해야 합니다.

위 내용은 Vue 문서의 구성요소에 의해 전달되는 다양한 유형의 필터 함수의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!