7. 많이 사용 되지 않지만 알고 있으면 도움이 되는 기능들

vue를 사용할 때 초급수준에서는 잘 사용되지는 않지만 추가로 알고 있으면 도움이 되는 개념들을 간단히 정리하였습니다.

1. slot

일반적으로 지식컴퍼넌트는 부모컴퍼넌트로부터 데이터를 받아 화면이 구성됩니다. 이때 porps를 활용하여 데이터가 전달됩니다.  여기에 slot을 활용하면 부보모부터 완성된 HTML을 받을 수 있습니다. 다시말하면 HTML 템플릿이 오는 비어있는 공간으로 또한  그 공간의 이름을 정의 할 수 있습니다.

https://kr.vuejs.org/v2/guide/components-slots.html

슬롯(Slots) — Vue.js

 

2. filter

템플릿에 바인딩 된 텍스트의 형식을 '|' 기호를 활용해서 변환하는 기능입니다. computed속성으로 해결 가능하지만 자주 사용하는 패턴이 있다면 전역에 정의해놓고 사용하면 편리합니다. 예를들면 숫자표기를 할 때 쉼표를 찍는다던가 첫글자를 대문자로 바꾸는 기능들을 정의할 떄 활용할 수 있습니다.

https://kr.vuejs.org/v2/guide/filters.html

필터 — Vue.js

3. Dynamic Component

컴퍼넌트를 동적으로 할당합니다. 데이터에 따라 그에 해당하는 컴퍼넌트를 보여주는 것 입니다.

<component v-bind:is="currentView"></component>

<script>
import Home from '...'

export default {
  data () {
    return {
      currentView: Home
    }
  }
}

</script>

 

4. 이벤트버스

컴퍼넌트의 데이터는 부모에서 자식으로 전달됩니다. 하지만 자식컴퍼넌트가 아니거나 관계가 길어지는 경우에는 이벤트버스를 활용합니다. 

http://vuejs.kr/jekyll/update/2017/02/13/vuejs-eventbus/

vue.js EventBus를 활용한 컴포넌트간 데이터 공유

5. 플러그인, 디렉티브

만약 서비스가 아닌 개발자를 위한 공통의 컴퍼넌트 또는 추가기능을 개발하고자 할때 사용됩니다. 또는 기존의 javascript라이브러리를 vue에서 사용하도록 모듈을 만들때 활용됩니다. 

https://kr.vuejs.org/v2/guide/plugins.html

플러그인 — Vue.js

https://kr.vuejs.org/v2/guide/custom-directive.html

사용자 지정 디렉티브 — Vue.js