VUE3 시작하기 튜토리얼: Vue.js 플러그인을 사용하여 별 등급 구성 요소 캡슐화

웹 애플리케이션에서 별 등급 구성 요소는 상품, 서비스 또는 기타 콘텐츠를 평가하는 데 자주 사용됩니다. 개발자가 더 쉽게 사용할 수 있도록 Vue.js 커뮤니티에는 이미 많은 별점 구성 요소 플러그인이 있지만, 별점 구성 요소 플러그인을 직접 캡슐화하는 것도 필요합니다. 이 기사에서는 구성 요소를 작성하는 전통적인 방식을 버리고 Vue.js 3의 Composition API를 소개하며 Vue.js 플러그인을 사용하여 별점 구성 요소를 캡슐화하는 방법을 설명합니다.

먼저 Composition API를 이해해 봅시다. Composition API에는 주로 다음과 같은 장점이 있습니다.

1. 더 나은 논리 캡슐화: 이제 라이프 사이클이나 옵션 API에 따라 속성과 메서드를 정의하는 대신 논리에 따라 논리를 그룹화할 수 있습니다. 또한 단일 책임 원칙에 따라 그룹화하여 코드를 더 쉽게 유지 관리하고 테스트할 수 있습니다.
2. 더 쉬운 로직 재사용: 로직을 사용자 정의 후크로 캡슐화하면 구성 요소 내에서 쉽게 공유 및 재사용할 수 있고, 다른 개발자와 공유할 수 있으며, 심지어 다른 사람이 사용할 수 있도록 npm에 배포할 수도 있습니다.
3. 더 직관적인 컴포넌트 코드: 로직이 더 작은 덩어리로 분할되어 있기 때문에 코드가 더 직관적이고 이해하기 쉬워져 불필요한 마크업과 중첩이 줄어들어 컴포넌트의 역할을 더 쉽게 추론할 수 있습니다.
4. 더 나은 유형 추론: Composition API는 TypeScript와 긴밀하게 통합되어 개발자가 TypeScript의 유형 추론 기능을 활용하여 보다 강력한 코드를 작성할 수 있습니다.

다음으로 Composition API를 사용하여 별점 구성 요소를 설계하고 구현하겠습니다.

1단계: Vue.js 플러그인 만들기

플러그인은 Vue.js의 기본 구조를 확장하는 방법입니다. Vue.js 플러그인은 Vue.js 애플리케이션에 전역 수준 기능을 제공할 수 있으므로 공통 구성 요소나 지시어를 구현하는 데 적합합니다. Vue.js 플러그인을 만들고 설치하는 기본 단계는 다음과 같습니다.

1. JavaScript 개체를 만들고 개체에 설치 방법을 정의합니다. 이 메소드는 Vue를 매개변수로 수신하고 새 Vue() 인스턴스 범위 내에서 새 구성요소 또는 기타 기능을 등록합니다.
2. 설치 방법에서 구성 요소 또는 기타 유틸리티를 정의합니다.
3. Vue에서 정적 use() 메서드를 호출하고 설치해야 하는 플러그인이 포함된 객체를 전달합니다. Vue.js는 이 객체의 설치 메소드를 호출하여 Vue.js 인스턴스를 메소드에 매개변수로 전달합니다.

샘플 코드는 다음과 같습니다.

// 定义插件对象
const StarRating = {
  install: function(Vue) {
    // 在install方法中注册全局组件 star-rating
    Vue.component('star-rating', {
      // 组件选项
    })
  }
}

// 调用Vue.use()方法安装插件
Vue.use(StarRating)

2단계: 구성 요소의 속성 및 이벤트 디자인

Composition API에서는 반응성() 메서드를 사용하여 구성 요소의 상태를 정의하는 것이 좋습니다. 계산된() 메서드를 사용하여 구성 요소의 파생 상태를 계산하고, watch() 메서드를 사용하여 구성 요소의 상태 변경을 모니터링합니다. 소품과 방출을 통해 데이터를 더 잘 전달하기 위해 반응성()을 사용하여 속성과 이벤트 개체를 정의할 수 있습니다.

구성 요소에는 다음 속성이 있어야 합니다.

• ating: 현재 등급
• maxRating: 최대 등급 수
• starSize: 별 크기
• padding: 별 사이의 간격
• showRating: 등급 표시 여부

구성 요소에 다음 이벤트가 있어야 합니다.

• update: 등급이 업데이트되면 자동으로 트리거됩니다.

다음은 속성 및 이벤트 개체를 정의하는 샘플 코드입니다.

const StarRating = {
  install: function(Vue) {
    Vue.component('star-rating', {
      setup(props, {emit}) {
        const state = reactive({
          rating: 0,
          maxRating: props.maxRating || 5,
          starSize: props.starSize || 25,
          padding: props.padding || 5,
          showRating: props.showRating || false,
        })

        function updateRating(rating) {
          state.rating = rating
          emit('update', rating)
        }

        return {
          state,
          updateRating
        }
      }
    })
  }
}

3단계: 구성 요소 UI 구현

다음으로 템플릿 코드를 사용하여 구성 요소의 UI를 구현합니다. setup() 함수는 Vue.js3에서 컴포넌트 상태 및 이벤트를 설정하는 데 사용되며, 템플릿의 보간 표현식 및 명령은 컴포넌트 UI를 렌더링하는 데 사용됩니다.

다음은 컴포넌트 UI를 구현하기 위한 샘플 코드입니다.

const StarRating = {
  install: function(Vue) {
    Vue.component('star-rating', {
      setup(props, {emit}) {
        const state = reactive({
          rating: 0,
          maxRating: props.maxRating || 5,
          starSize: props.starSize || 25,
          padding: props.padding || 5,
          showRating: props.showRating || false,
        })

        function updateRating(rating) {
          state.rating = rating
          emit('update', rating)
        }

        const stars = []
        for (let i = 0; i < state.maxRating; i++) {
          stars.push(i < state.rating ? 'star' : 'star_border')
        }

        return {
          state,
          updateRating,
          stars,
        }
      },
      template: `
        <div>
          <i 
            v-for="star in stars"
            :key="star"
            :class="[star]"
            :style="{
              'font-size': state.starSize + 'px', 
              'padding-right': state.padding + 'px',
            }"
            @click="updateRating(stars.indexOf(star) + 1)"
          ></i>
          <span v-if="state.showRating">{{state.rating}}/{{state.maxRating}}</span>
        </div>
      `
    })
  }
}

v-for 지시문을 사용하여 별을 루프로 렌더링하고 i 태그와 FontAwesome 글꼴 아이콘을 사용하여 별 아이콘을 렌더링했습니다. 이런 방식으로 사용자의 선택에 따라 평점을 업데이트할 수 있습니다.

4단계: 구성 요소 사용

이제 별점 구성 요소 플러그인 개발이 완료되었습니다. 이 플러그인을 Vue.js 애플리케이션에 전체적으로 설치한 다음 모든 구성 요소 템플릿에서 사용할 수 있습니다.

Vue.js 애플리케이션에서 구성 요소를 사용하기 위한 샘플 코드:

const app = Vue.createApp({})
app.use(StarRating)

app.component('my-component', {
  data() {
    return {
      rating: 3
    }
  },
  template: `
    <div>
      <star-rating 
        :max-rating="5" 
        :show-rating="true"
        :rating="rating"
        @update="rating = $event"
      />
    </div>
  `
})

app.mount('#app')

이 샘플 코드에서는 Vue.js 애플리케이션에 StarRating 플러그인을 등록하고 my-comComponent 구성 요소에 평가 구성 요소를 사용했습니다. my-comComponent 구성 요소에서는 $event 매개변수를 사용하여 업데이트 이벤트의 새 등급 값에 액세스합니다.

결론

Composition API는 Vue.js 구성 요소 개발에 많은 새로운 기능을 제공합니다. Vue.js 플러그인 메커니즘과 결합된 이러한 새로운 기능을 사용하면 구성 요소를 더 쉽게 캡슐화하고 재사용할 수 있습니다. 이 기사에서는 Composition API와 Vue.js 플러그인을 사용하여 별점 구성 요소를 개발하는 방법을 단계별로 배웠습니다. 이제 이러한 기술을 사용하여 자신만의 구성 요소 플러그인을 개발하고 패키징할 수 있습니다.

위 내용은 VUE3 시작하기 튜토리얼: Vue.js 플러그인을 사용하여 별 등급 구성 요소 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!