在es6中使用export和import实现模块化;css
js文件:html
export function test(x) { console.log(x); }
vue组件:vue
import {test} from "../model/vueEvent.js";
这是标准的export、import配合使用方法,当我在mounted钩子函数使用引入的test()方法时可以直接使用。es6
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:我有一个好东西,可是我不告诉你,因此你也不知道我到底有没有........................spa
/*只需抛出函数*/ export default { methods:{ test }, }
HTML就能清楚知道,轻松使用。code