Vue에서 타사 구성 요소를 우아하게 캡슐화하는 방법은 무엇입니까? 포장 방법 소개

Vue에서 타사 구성 요소를 우아하게 캡슐화하는 방법은 무엇입니까? 다음 기사에서는 예제를 사용하여 Vue에서 타사 구성 요소를 보다 우아하게 캡슐화하는 방법을 탐색합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

1. 수요 시나리오 설명

실제 개발 과정에서는 바퀴의 재발명을 줄이고, 작업 효율성을 향상시키며, 개발 시간과 비용을 절약하기 위해, 웹 프론트엔드에서 많이 사용되는 element-ui와 같은 UI 컴포넌트 라이브러리의 사용은 불가피합니다. 그러나 때로는 이미지 구성 요소와 같은 원본 구성 요소를 기반으로 일부 수정이 필요한 경우도 있습니다. 이미지 로딩 실패 시 표시되는 특정 이미지를 통합하고, 컴포넌트를 사용할 때마다 추가해야 합니다. 번거롭고 시간이 많이 소요됩니다. 잘못 로드된 이미지를 업데이트해야 할 경우 유지 관리 비용이 많이 듭니다. 이 컴포넌트가 다시 사용되는 곳을 찾아 수정해야 합니다. (학습 동영상 공유: vuejs 튜토리얼)

또 다른 예는 매우 일반적인 사용자 정의 페이징 구성 요소입니다. 구성 요소의 스타일, 기본적으로 지원되는 페이지당 페이지 수, 캡슐화와 재사용은 유지 관리성과 개발 효율성 측면에서 유리합니다.

그러나 페이징 구성 요소를 처음부터 작성할 필요는 없으며 원래 기반으로 캡슐화하면 됩니다. 그렇다면 타사 구성 요소 라이브러리의 구성 요소를 빠르고 우아하게 캡슐화하는 방법은 무엇입니까? v-bind="$attrs" 및 v-on="$listeners" ="$listeners"이 우리에게 놀라움을 선사할 것입니다. 캡슐화된 구성 요소가 원본 구성 요소의 거의 모든 v-bind 속성과 v-on 이벤트를 "상속"하도록 만들 수 있으며 해당 사용법과 기능은 원본 구성 요소와 동일합니다.

el-image를 사용자 정의 이미지 구성 요소로 캡슐화하고 사용자 정의 이미지를 사용하여 모든 곳에 이미지를 표시합니다. 이미지 로딩 과정에서 "Loading..." 프롬프트가 균일하게 표시되며, 로딩 오류가 발생하면 통일된 기본 이미지가 표시됩니다. 다음은 사용자 정의 이미지 구성 요소 로드 프로세스와 로드 오류로 인한 영향입니다.

2. 핵심 기술 포인트 소개

1.v-bind="$attrs"

v-bind="$attrs"의 멋진 용도는 상위 수준 구성 요소를 만들고 세 번째 구성 요소를 캡슐화하는 것입니다. party 구성 요소

는 상위 범위

에 사용된 v-bind 속성을 자동으로 바인딩하고 v-bind="$attrs"를 사용하여 캡슐화된 구성 요소에 전달할 수 있습니다.

vue 공식 웹사이트에서 발췌한 소개

에는 상위 범위에서 소품으로 인식(및 획득)되지 않는 속성

바인딩(클래스 및 스타일 제외)이 포함되어 있습니다. 구성 요소가 어떤 props도 선언하지 않으면

모든 상위 범위 바인딩(클래스 및 스타일 제외)이 여기에 포함되며

v-bind="$attrs"를 통해 내부 구성 요소로 전달될 수 있습니다. - 높은 수준을 생성할 때 매우 유용합니다. 레벨 구성 요소의 경우.

예를 들어, 캡슐화된 사용자 정의 이미지 구성 요소에 v-bind="$attrs"를 사용한 후, 또한 사용자 정의 이미지 구성 요소에는 el-image의 거의 모든 속성이 있습니다. 그리고 그 효과와 사용법은 el-image를 사용할 때와 동일합니다. 즉, el-image의 기사를 보면 custom-Image를 사용할 수 있습니다.

2.v-on="$listeners"

v-on="$list의 기능 및 사용법과 동일합니다. 에너스" v-bind= "$attrs"도 비슷합니다. v-on을 사용하여 상위 범위의 시간 리스너를 v-on="$listeners" 구성 요소 및 v-bind "$attrs "는 하나의 속성이 이벤트라는 점을 제외하면 유사한 기능을 갖습니다. 또는 사용자 정의 이미지 구성 요소를 예로 들어 보겠습니다. 이때 custom-Image 컴포넌트에는 el-image 컴포넌트의 거의 모든 이벤트가 포함되어 있습니다. 그리고 그 효과와 사용법은 el-image를 사용할 때와 동일합니다.

상위 범위의 v-on 이벤트 리스너를 포함합니다(.native 수정자 없음).

v-on="$listeners"를 통해 내부 구성 요소로 전달할 수 있습니다. 더 높은 수준의 구성 요소를 만들 때 매우 유용합니다.

vue 공식 웹사이트에서 가져온 소개

3. el-image 캡슐화를 위한 코드 예제

사용자 정의 이미지 구성 요소 사용의 예

<custom-Image fit="fill" class="icon-img" :src="picPreview(expert)"></custom-Image>

el-image를 사용자 정의 이미지 구성 요소로 캡슐화하는 예

<template>
  <div id="CustomImage">
    <el-image v-bind="$attrs" v-on="$listeners">
      <div slot="error">
        <img src="/static/imghwm/default1.png"  data-src="require(&#39;image-f/icon-empty-img.png&#39;)"  class="lazy"  : alt="图片加载失败.png"/>
      </div>
      <div slot="placeholder">加载中...</div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: &#39;CustomImage&#39;
}
</script>

<style scoped>
  #CustomImage {
  .image-slot {
    text-align: center;
  }

  .placeholder-slot {
    text-align: center;
  }
}
</style>

(학습 영상 공유 : 웹 프론트엔드 개발, 프로그래밍 입문)

위 내용은 Vue에서 타사 구성 요소를 우아하게 캡슐화하는 방법은 무엇입니까? 포장 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!