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

Question

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

html prettyprint-override">    <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 的方式是错误的。那么如何访问数据中的道具消息Id呢？

Answer 1

要分配等于props的数据属性，您可以使用Watcher，如下所示：

<script>
   export default {
      props: ['messageId'],
      data: function(){
         var theData={
            somevar: "",
            // other object attributes
         }
      },
      watch: {
        messageId: function(newVal) { 
           this.somevar = newVal
        }
      }
   }

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

Answer 3

从 data（） 方法中，可以使用此方法引用组件的属性。

所以在你的情况下：

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

  return theData;
}