일을 할때 막혔던 부분에서 공부를 한뒤 정리를 하게 되었다.

Vue 재사용

input value 값 가져오기
만약 ref가 있다면 this.$refs.이름.value; 로 가져올수 있다.
함수 한곳에서 여러개의 인풋의 값들을 가져와야 한다면 유용할듯하다.
하지만 이전에 정리했던 배열로 가져와도 무방하다.
차이는 있을듯 싶지만 잘 모르겠다 조금더 공부해야 봐야 알것 같다.

slot

컴포넌트 템플릿의 재사용성을 늘려주기 위한 기능
만들어둔 컴포넌트를 여러곳에서 사용하지만 작은 부분을 수정하고 싶을때
강력한 기능이다. 하위 컴포넌트에 slot 이란 태그만 넣어놓으면 컴포넌트를
사용한곳에서 넣고 싶은 태그를 넣도록 수정이 가능하다.
책깔피 같은 기능 ? 하위 컴포넌트에서 만약 정하지 못한 부분이 있다면
slot 해놓고 상위에서 컴포넌트 추가해서 slot 부분에 html을 넣을수 있다.

하위 컴포넌트

<template>
  <div class="tab panel">
    <!-- 탭 헤더 -->
    <slot></slot>
    <!-- 탭 본문 -->
    <div class="content">
      Tab Contents
    </div>
  </div>
</template>

상위 컴포넌트

`<template>
  <button-tab>
    <!-- slot 영역 -->
    <h1>First Header</h1>
  </button-tab>
  <button-tab>
    <!-- slot 영역 -->
    <h1>Second Header</h1>
  </button-tab>
  <button-tab>
    <!-- slot 영역 -->
    <h1>Third Header</h1>
  </button-tab>
</template>`

2.6버전 부터

<template v-slot:header>

이렇게 쓰인다.

스콥드 슬롯 (scoped slot)

컴포넌트 데이터의 재사용성을 높여주는 기능
하위 컴포넌트의 값을 상위 컴포넌트에서 접근하여 사용할 수 있습니다.

emit 과 비슷하게 하위 컴포넌트에서 상위 컴포넌트로 data 값을 전달할수 있다.
하위 컴포넌트에서 <slot :상위에서 쓰고자하는 이름(a) = "하위 컴포넌트 데이터(b)"/>
로 전달해 주고
상위 컴포넌트에서

<하위 컴포넌트 > 
<template slot-scope="쓰고자하는 이름(propsdata)">
{{쓰고자하는 이름(propsdata).상위에서 쓰고자하는 이름(a)}} </template> 
</하위컴포넌트> 

이러면 결과가 하위 컴포넌트 데이터인 b가 도출 된다.

Mixins 믹스인

컴포넌트간에 공통으로 로직, 기능들을 재사용하는 방법
재사용 로직으로는 data,methods,created, 등과 같은 컴포넌트 옵션들이다.
사용은 한 컴포넌트에서 옵션들을 만들고 사용하고 자하는 컴포넌트에서
컴포넌트를 import 하고 mixins:[컴포넌트] 로 사용하면 된다.
함수 들은 this.함수 이런식으로 바로 사용할수 있다.