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