Question

我在组件中定义了两个函数。 foo（）在<script>内定义，fooExported（）在导出默认值{}

中定义

我的理解是，可以在模板中访问导出默认值{}内的函数，因此它听起来像是＆＃34;未导出的＆＃34; function foo（）是一个＆＃34; private＆＃34;功能仅在<script>范围内可用（这是正确的吗？）。他们还有什么不同之处？

此外，我正试图访问此内容。＆＃34;未导出的＆＃34;方法，但它显示未定义的错误。是否无法访问数据？

<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>

Answer 1

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

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

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

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

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

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

1 个答案: