Vue.js 组件中的导出方法和未导出方法

【问题标题】：exported method and unexported methods in Vue.js componentVue.js 组件中的导出方法和未导出方法
【发布时间】：2018-02-02 15:45:00
【问题描述】：

我在一个组件中定义了两个函数。 foo() 仅在<script> 中定义，而 fooExported() 则在 export default {} 的主体中定义

我的理解是 export default {} 中的函数可以在模板中访问，因此听起来“未导出”函数 foo() 是仅在 <script> 范围内可用的“私有”函数（这是正确的吗？）。它们还有什么不同？

我也试图在“未导出”方法中访问 this.$data，但它显示未定义的错误。不能访问数据吗？

<template>
  ...
</template>

<script>
function foo(){
    console.log(this.$data.message)  // error: 'this' is undefined.
}
const bar = 123

export default {
  data(){
    return {
      message: 'MyMessage'
    }
  },
  methods: {
      fooExported(){ 
          console.log(this.$data.message)  // this works.
      }
   }
}
</script>

<style scoped>
</style>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您正在single-file component .vue 文件中定义一个组件。这意味着 default 对象中的所有内容都直接传递给新的 Vue 实例的构造函数方法。 Vue 知道在methods 对象中定义的任何方法中自动设置对this 的引用。

您的 foo 方法永远不会由 Vue 处理，并且对 this 的引用并不指向该函数上下文中的 Vue 实例。

如果您希望您的 foo 方法具有对 message 数据属性的引用，您可以从 created 挂钩调用该方法并将 this.message 作为参数传递：

created() {
  foo(this.message);
}

旁注：如上所示，您可以直接从this 引用数据属性；你不需要通过this.$data。

【讨论】：