내가 만든 js 파일 vue 에서 사용하기 : export / import

< 참고 자료>

 

medium.com/@_diana_lee/default-export와-named-export-차이점-38fa5d7f57d4

developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

---

/* test.js */

//1 . 변수, 함수 정의
const value  = 'One'
const method = (msg) => { console.log(msg) }

//2. 변수, 함수를 하나의 변수에 담기!
const test   = { value, method }

//3. 이 변수 내보내기! (반드시 해야함!)
export default test

<!-- App.vue -->

<script>

    import test from './test.js'

    export default {

        setup() {

            console.log(test.value)
            test.method('hello!')

        }
        
    }

</script>

---

ES6 의 export, import

/* text.js */
const value  = 'One'
const method = (msg) => { console.log(msg) }

export { value, method } // 'export default' 아님! 그냥 'export'

<!-- App.vue -->

<script>

    import { value, method } from './src/js/test.js'

    export default {

        setup() {

            console.log(value)
            method('HELLO!')

        }
        
    }

</script>