我的组件留下了许多行代码，因此我决定将这些方法放在一个名为functions.js 的单独文件中。我无法调用这些方法。
我试过这个：
函数.js
function sendList() {...};
function getLists() {...};
function deleteList(listId) {...}
export default {sendList, getLists, deleteList}
MyLayout.vue
...
<script>
import {sendList, getLists, deleteList} from '../statics/functions.js'
...
created() { this.getLists();},
...
出现3个错误：
vue.runtime.esm.js?2b0e:587 [Vue warn]: 创建钩子时出错：“TypeError: this.getLists 不是函数”
类型错误：this.getLists 不是一个函数
属性或方法“列表”未在实例上定义，而是在渲染期间引用。通过初始化该属性，确保该属性在数据选项中或对于基于类的组件是反应性的。看：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
我想有两件事应该解决：
- 首先要确保导出时没有
default在你的functions.js文件中，如下所示：
function sendList() {...};
function getLists() {...};
function deleteList(listId) {...}
export { sendList, getLists, deleteList }
...或者使用 ES6 语法更漂亮：
const sendList = () => {...};
const getLists = () => {...};
const deleteList = (listId) => {...}
export { sendList, getLists, deleteList }
- 第二件事，导入它们并无需使用
this，如下所示：
...
<script>
import { sendList, getLists, deleteList } from '../statics/functions.js'
...
created() { getLists() },
...
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
