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

最新推荐文章于 2023-03-24 16:35:35 发布

dlpncgi56730

最新推荐文章于 2023-03-24 16:35:35 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LittleT/p/10747281.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就能清楚知道，轻松使用。

转载于:https://www.cnblogs.com/LittleT/p/10747281.html

关注