[Spring Boot + Vue.js] 게시판 만들기 - 버튼

이번 포스팅은 공통으로 사용되는 버튼을 컴포넌트화 하는 것에 대해 알아보자

 

버튼 컴포넌트

기존 v-btn에 추가적으로 반응형, 아이콘을 적용하기 위해 공통 컴포넌트로 구현

 

구현

1. 컴포넌트 구현

<template>
  <v-btn
    class="white--text"
    v-on="$listeners"
    v-bind="$attrs"
    v-if="!isMobile()"
  >
    <v-icon small>
      {{ iconName }}
    </v-icon>
    <span style="width: 5px" v-if="btnName"></span>
    {{ btnName }}
  </v-btn>
  <v-btn class="white--text" v-on="$listeners" v-bind="$attrs" v-else>
    <v-icon small>
      {{ iconName }}
    </v-icon>
  </v-btn>
</template>

<script>
import btnMixins from '@/mixins/btnMixins'

export default {
  mixins: [btnMixins],
  props: {
    iconName: String,
    btnName: String,
  },
}
</script>

• v-on="$listeners" 를 사용하면 부모의 이벤트 리스너를 자식에게 전달할 수 있다.
• v-bind="$attrs" 사용 시 선택적으로 필요한 속성만 자식 컴포넌트에 렌더링 할 수 있다.
• Mixins 을 이용하여 구현한 isMobile() 함수를 사용하여 화면 사이즈가 모바일인지 여부를 확인하여 버튼의 모양을 다르게 구성한다.

2. Mixins 구현

export default {
  methods: {
    isMobile() {
      return this.$vuetify.breakpoint.mobile
    },
  },
}

• Vuetify의 breakpoint 속성을 이용해 모바일 화면 여부를 리턴한다.

3. 전역 컴포넌트 선언

// 버튼 전역 컴포넌트
import Button from '@/components/common/Button'
// 버튼 전역 컴포넌트 선언
Vue.component('Button', Button)

• main.js 에 버튼 컴포넌트를 전역으로 선언하여 각 컴포넌트마다 import 가 필요 없도록 한다.

사용 방법

버튼은 여러 곳에 쓰이지만 예시로 게시판 목록의 검색 버튼 부분이다.

<template>
  <Button
   @click="getBoardList"
   color="blue-grey darken-1"
   rounded
   small
   block
   iconName="mdi-magnify"
   btnName="Search"
  ></Button>
</template>

<script>
export default {
  methods: {
    getBoardList() {
      // 게시글 목록 조회
    },
  },
}
</script>

• v-btn의 다양한 속성과 props 속성으로 전달할 아이콘, 버튼 명을 설정한다.
• click 이벤트로 부모 컴포넌트에 존재하는 게시글 목록 조회 함수를 호출한다.

동작 확인