vue中建立js文件使用export拋出函數，import引入後不能綁定HTML的問題

在es6中使用export和import實現模塊化；

js文件：

export function test(x) { console.log(x); }

vue組件：

import {test} from "../model/vueEvent.js";

這是標準的export、import配合使用方法，當我在mounted鉤子函數使用引入的test（）方法時可以直接使用。

mounted(){ test("aaa"); }
/*控制檯輸出*/
aaa

 

可是想要直接把函數綁定在HTML函數上控制檯報錯。

<button @click="test('測試')">export拋出函數使用</button>

/*控制檯輸出*/ Property or method "test" is not defined on the instance but referenced during render.

 

當時的第一想法就是vue中先渲染HTML可是這時候還沒使用import引入外部函數，因此綁定失敗。後來發現是本身錯了，正解應該是：雖然vue組件中HTML，css，js能夠在同一個

頁面書寫，可是js裏面的函數、變量是須要使用export default{ }拋出以後html才能使用的。這就是爲何script中的鉤子函數可以使用外部函數可是不能直接綁定在html上面的緣由。

tip:我有一個好東西，可是我不告訴你，因此你也不知道我到底有沒有........................

/*只需拋出函數*/ export default { methods:{ test }, }

HTML就能清楚知道，輕鬆使用。