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就能清楚知道，輕松使用。