在Vue组件数据功能中访问道具 [英] Accessing props in vue component data function

问题描述

我正在将道具传递给组件:

I am passing a props to a component:

<template>
   {{messageId}}
   // other html code
</template>

<script>
   export default {
      props: ['messageId'],
      data: function(){
         var theData={
            // below line gives ReferenceError messageId is not defined
            somevar: messageId,
            // other object attributes
         }
      }
   }
</script>

在上面的代码中，我注释了给出错误的行.如果我删除该行，它将正常工作并且模板呈现正确(并且我也可以看到{{messageId}}的期望值).因此，传递数据的逻辑是正确的.

In above code, I have commented the line that gives the error. If I remove that line, it works as normal and template renders properly (and I can see the expected value of {{messageId}} as well). Hence the logic to pass data is correct.

似乎在data()中访问messageId的方法是错误的. 那么如何访问数据中的道具messageId?

It seems that the way to access the messageId in data() is wrong. So how do I access the props messageId in data?

推荐答案

通过data()方法，您可以使用this引用组件的属性.

From the data() method, you can reference the component's properties using this.

所以在您的情况下:

data: function() {
  var theData = {
    somevar: this.messageId,
    // other object attributes
  }

  return theData;
}

这篇关于在Vue组件数据功能中访问道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！