mixin(vue)

같은 기능을 각각의 컴포넌트에 재 각각 써준다면 수정시 불편함을 초래한다. 

한군데 모아두어 그것을 참조하는 컴포넌트가 전체 수정이 될 수 있게 도와준다. 

 

공통 컴포넌트를 mixin을 만들어서 사용할 수 있다. 

 

 

//componentA.vue

<template>
    <p>{{getDateAndTime(createdAt)}}</p>
</template>

<script>

  export default {
    data(){
      return{
        createdAt: null
      }
    },
    created(){
      this.createdAt = new Date()
    },
    methods:{
      getDateAndTime(date){
        if(date !== null){
        let hour = date.getHours()
        let minutes = date.getMinutes()
        let fullDate =  `${date.getFullYear()}/${date.getMonth() +1}/${date.getDate()}`
        return `${fullDate} ${hour}: ${minutes}`
        }else{
          return null
        }
      }
    }
  }

</script>

날짜를 표시하는 date함수를 여러 컴포넌트에서 사용하기

 

//mixins/dataFormat.js

export const dateFormate = {
  methods:{
    getDateAndTime(date){
      if(date !== null){
      let hour = date.getHours()
      let minutes = date.getMinutes()
      let fullDate =  `${date.getFullYear()}/${date.getMonth() +1}/${date.getDate()}`
      return `${fullDate} ${hour}: ${minutes}`
      }else{
        return null
      }
    }
  }
}

export 함수를 만든 후 vue와 동일하게 methods를 입력시킨다.

 

 

//componenets.vue

...
    created(){
      this.createdAt = new Date()
    },
    methods:{
      // getDateAndTime(date){
      //   if(date !== null){
      //   let hour = date.getHours()
      //   let minutes = date.getMinutes()
      //   let fullDate =  `${date.getFullYear()}/${date.getMonth() +1}/${date.getDate()}`
      //   return `${fullDate} ${hour}: ${minutes}`
      //   }else{
      //     return null
      //   }
      // }
    },
    mixins: [dateFormat]
  }

import로 mixin으로 내보낸 함수를 불러온다.

mixins 속성을 만든 후 array형태로 입력시킨다. 

 

 

---

//mixin/dataFormat.js

export const dateFormate = {
  data(){
    return{
        mixinData: '나는 믹스인데이터'
    }
  },
  methods:{
    getDateAndTime(date){
      if(date !== null){
      let hour = date.getHours()
      let minutes = date.getMinutes()
      let fullDate =  `${date.getFullYear()}/${date.getMonth() +1}/${date.getDate()}`
      return `${fullDate} ${hour}: ${minutes}`
      }else{
        return null
      }
    }
  }
}

*minxin안에서는 vue instance에서 사용하는 속성값을 사용할 수 있다. 

 

<template>
    <p>{{helloMixin}}</p>
</template>

<script>
  import {dateFormat} from '../mixins/dateFormat'
  export default {
    computed:{
      helloMixin(){
        return this.mixinData + '안녕하세요'
      }
    },
    mixins: [dateFormat]
  }

</script>

믹스인으로 만든 함수나 인스턴스는 this를 통해서 불러올 수 있다. 

 

만약에 컴포넌트 내에 선언된 함수와 minxin 함수의 이름이 같았다면

믹스인 보다는 컴포넌트 내에 있는 함수가 우선시 된다. 

 

렌더링 순서 

믹스인 > 유저컴포넌트