#成功した構文
Vueのファイル:index.vue
index.vue
<template>
<div>
<p>{{ msg }}</p>
</div>
</template>
<script>
import { t1m1, t1m2 } from './t1'
import { t2 } from './t2'
import { t3m1 } from './t3'
export default {
name: 'test',
data () {
return {
msg: 'you are ok.'
}
},
mounted () {
t1m1()
t2.t2m1()
t1m2()
t2.t2m2()
t3m1()
}
}
</script>
Javascriptファイル1
t1.js
const t1m1 = function () {
console.log('t1m1 ok')
}
function t1m2 () {
console.log('t1m2 ok')
}
export { t1m1, t1m2 }
Javascriptファイル2
t2.js
const t2 = {}
t2.t2m1 = function () {
console.log('t2m1 ok')
}
t2.t2m2 = function () {
console.log('t2m2 ok')
}
export { t2 }
```
**Javascriptファイル3**
~~~javascript:t3.js
export default function t3m1 () {
console.log('t3m1 ok')
}
#失敗した構文
例1
t2.js
const t2 = {}
t2.t2m1 = function () {
console.log('t2m1 ok')
}
function t2.t2m2 () {
console.log('t2m2 ok')
}
export { t2 }
エラーメッセージは以下
Module build failed: SyntaxError: t2.js: Unexpected token, expected
例2
t2.js
const t2 = {}
t2.t2m1 = function () {
console.log('t2m1 ok')
}
t2.t2m2 = function () {
console.log('t2m2 ok')
}
export default { t2 }
エラーメッセージは以下
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 't2m1' of undefined"
例3
t3.js
export function t3m1 () {
console.log('t3m1 ok')
}
エラーメッセージは以下
[Vue warn]: Error in mounted hook: "TypeError: Object(...) is not a function"
例4
t3.js
export t3m1 = function () {
console.log('t3m1 ok')
}
```
エラーメッセージは以下
<font color="red">Module build failed: SyntaxError: t3.js: Unexpected token, expected { (1:7)</font>
**例5**
~~~javascript:t3.js
const t3m1 = function () {
console.log('t3m1 ok')
}
export { t3m1 }
エラーメッセージは以下
[Vue warn]: Error in mounted hook: "TypeError: Object(...) is not a function"
例6
t3.js
const t3m1 = function () {
console.log('t3m1 ok')
}
export default { t3m1 }
エラーメッセージは以下
例7
t3.js
function t3m1 () {
console.log('t3m1 ok')
}
export default { t3m1 }
エラーメッセージは以下
[Vue warn]: Error in mounted hook: "TypeError: Object(...) is not a function"