Question

我的组件上留下了很多行代码，因此我决定将这些方法放在一个单独的名为functions.js的文件中。我不能调用那些方法。

我尝试过：

functions.js

EditText

MyLayout.vue

function sendList() {...};
function getLists() {...};
function deleteList(listId) {...}

export default {sendList, getLists, deleteList}

出现3个错误：

vue.runtime.esm.js？2b0e：587 [Vue警告]：创建的挂钩中出现错误：“ TypeError：this.getLists不是函数”

TypeError：this.getLists不是函数

属性或方法“列表”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

Answer 1

我想2件事情应该被固定：

的第一件事是确保出口不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() },
...

Answer 2

另一个回答者是正确的，您需要使用export而不是export default。

如果确实需要它们成为组件实例上的方法，则在导入它们后，可以将它们添加到方法中，如下所示：

methods: {
  deleteList,
  sendList,
  getLists,
  anotherFunction() {
   ...
  },
}

，然后可以通过this.getLists()来访问它们，依此类推。它仍然是多行代码（对于您要导入的每种方法，一行代码），但是比具有该方法和所有相关逻辑的方法少。

哦，关于第三个错误，not defined on the instance but referenced during render？当模板中的某些部分在脚本部分中未正确定义时，就会发生这种情况。您是否在要输入lists的地方输入了list？

如何在外部.js文件中分离.vue组件的方法？

2 个答案: