vue中建立js文件使用export抛出函数,import引入后不能绑定HTML的问题

在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

相关文章
相关标签/搜索