在es6中使用export和import实现模块化;
js文件:
export functiontest(x) {
console.log(x);
}
vue组件:
import {test} from "../model/vueEvent.js";
这是标准的export、import配合使用方法,当我在mounted钩子函数使用引入的test()方法时能够直接使用。
mounted(){
test("aaa");
}
/*控制台输出*/
aaa
但是想要直接把函数绑定在HTML函数上控制台报错。
export抛出函数使用
/*控制台输出*/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:我有一个好东西,但是我不告诉你,所以你也不知道我到底有没有........................
/*只需抛出函数*/exportdefault{
methods:{
test
},
}
HTML就能清楚知道,轻松使用。