vue.js 에서 공통함수 사용하기
javascript 에서 사용하던 공통함수 기법이 통하질 않았다!
vue에서 사용하는 방법이 있나 찾아보니 mixin 이라는 방법이 있어서 기록해 둔다
import MathUtil from "@/assets/js/MathUtil";
export default {
mixins: [MathUtil],
methods: {
$yyyyMMdd( str, delimiter )
{
const date = new Date( str );
return date.getFullYear() + delimiter + this.$zerofill( ( date.getMonth() + 1 ), 2 ) + delimiter + date.getDate();
},
$addMonth( str, num, delimiter )
{
const date = new Date( str );
return date.getFullYear() + delimiter + ( date.getMonth() + 1 + num ) + delimiter + date.getDate();
}
}
}export default {
$zerofill( value, fillCount )
{
let result = value;
// value가 number 타입일 경우 string으로 변경 후 작업
if( typeof value === 'number' )
{
result = value.toString();
}
return result.padStart( fillCount, '0' );
}
}위 두 유틸함수를 사용하고 싶을땐?
해당 컴포넌트에서 mixin 을 사용해라
<script>
import DateUtil from "@/assets/js/DateUtil";
export default {
name: "ListComponent",
mixins: [DateUtil],
methods: {
console.log( this.$yyyyMMdd( new Date(), '-' ) );
}
}위 코드에서 외울 곳은
- import DateUtil ...
- mixins: [DateUtil]
- this.$yyyyMMdd
3가지이다.
import 한 소스를 mixins 에 넣어주고( components: 와 동일 ) this 접근자를 사용해서 해당 함수를 사용한다.
-끗-