在 vue 组件数据函数中访问 props

Question

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

     <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}} 的预期值）。因此，传递数据的逻辑是正确的。

似乎在 data() 中访问 messageId 的方式是错误的。那么如何访问数据中的道具 messageId ？

原文由 rahulserver 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

所以在你的情况下：

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

  return theData;
}

原文由 thanksd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

编辑：根据 Ryans 的帖子，可以使用如下箭头函数引用实例：

 data: (instance) => ({
  somevar: instance.messageId
}),

上一篇文章：

请注意，如果您使用箭头函数来分配数据，这将不起作用：

 data: () => ({
  somevar: this.messageId // undefined
}),

因为 this 不会指向组件。相反，使用普通函数：

 data: function() {
  return { somevar: this.messageId }
},

或使用 Siva Tumma 建议的 ES6 对象方法速记：

 data() {
    return { somevar: this.messageId }
}

原文由 mufasa 发布，翻译遵循 CC BY-SA 4.0 许可协议