웹 애플리케이션에서 별 등급 구성 요소는 상품, 서비스 또는 기타 콘텐츠를 평가하는 데 자주 사용됩니다. 개발자가 더 쉽게 사용할 수 있도록 Vue.js 커뮤니티에는 이미 많은 별점 구성 요소 플러그인이 있지만, 별점 구성 요소 플러그인을 직접 캡슐화하는 것도 필요합니다. 이 기사에서는 구성 요소를 작성하는 전통적인 방식을 버리고 Vue.js 3의 Composition API를 소개하며 Vue.js 플러그인을 사용하여 별점 구성 요소를 캡슐화하는 방법을 설명합니다.
먼저 Composition API를 이해해 봅시다. Composition API에는 주로 다음과 같은 장점이 있습니다.
다음으로 Composition API를 사용하여 별점 구성 요소를 설계하고 구현하겠습니다.
플러그인은 Vue.js의 기본 구조를 확장하는 방법입니다. Vue.js 플러그인은 Vue.js 애플리케이션에 전역 수준 기능을 제공할 수 있으므로 공통 구성 요소나 지시어를 구현하는 데 적합합니다. Vue.js 플러그인을 만들고 설치하는 기본 단계는 다음과 같습니다.
샘플 코드는 다음과 같습니다.
// 定义插件对象
const StarRating = {
install: function(Vue) {
// 在install方法中注册全局组件 star-rating
Vue.component('star-rating', {
// 组件选项
})
}
}
// 调用Vue.use()方法安装插件
Vue.use(StarRating)Composition API에서는 반응성() 메서드를 사용하여 구성 요소의 상태를 정의하는 것이 좋습니다. 계산된() 메서드를 사용하여 구성 요소의 파생 상태를 계산하고, watch() 메서드를 사용하여 구성 요소의 상태 변경을 모니터링합니다. 소품과 방출을 통해 데이터를 더 잘 전달하기 위해 반응성()을 사용하여 속성과 이벤트 개체를 정의할 수 있습니다.
구성 요소에는 다음 속성이 있어야 합니다.
구성 요소에 다음 이벤트가 있어야 합니다.
다음은 속성 및 이벤트 개체를 정의하는 샘플 코드입니다.
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
}
}
})
}
}다음으로 템플릿 코드를 사용하여 구성 요소의 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 글꼴 아이콘을 사용하여 별 아이콘을 렌더링했습니다. 이런 방식으로 사용자의 선택에 따라 평점을 업데이트할 수 있습니다.
이제 별점 구성 요소 플러그인 개발이 완료되었습니다. 이 플러그인을 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
