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

Answer 1

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

所以在你的情况下：

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

  return theData;
}

Answer 2

请注意，如果您使用箭头功能分配数据，则此操作将无效：

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

因为this不会指向该组件。而是使用简单的函数：

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

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

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

Answer 3

要分配一个等于道具的数据属性，您可以使用观察者，如下所示：

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

Answer 4

<template>
   {{messaged}}
   // other HTML code
</template>

<script>
   export default {
      props: ['messaged'],
      data: function(){
         return () {
           some_var: this.messaged
         }
      },
      methods: {
      post_order: function () {
        console.log({
          some_var: this.some_var.id
        })
      }
    }

   }
</script>

Answer 5

我认为自问题在两个月前发布以来，您已经完成了解决方案。昨天我遇到了同样的问题，因此尝试了以上解决方案，但是没有运气。但是，对于这种情况，我想分享一个替代解决方案，该解决方案可以帮助某人。 watch具有一些属性来处理这类案件。下面的脚本显示了我们如何接受props值是数据。

<script>
   export default {
      props: {
            messageId: {
                type: String,
                required: true
            }
        }
      data: function(){
         var theData= {
            somevar: "",
            // other object attributes
         }

         return theData;
      },
      watch: {
        messageId: {
                // Run as soon as the component loads
                immediate: true,
                handler() {
                    // Set the 'somevar' value as props
                    this.somevar = this.messageId;
                }
            }
      }
   }
</script>

Answer 6

正如@Saurabh 所描述的，我想添加更多细节。

如果您正在渲染一个 Child 组件，并希望通过 data 设置 props 变量，您必须同时使用 this 和 watch 函数:

步骤 1。使用 this 访问 props 变量。

<script>
export default {

    data () {
      id: 0
    },
    
  
    props: ['propId'],
    methods: {
      init() { 
        this.id = this.propId  // step1. assign propId to id
      }
    }
}
</script>

步骤 2。观察 props 变量

<script>
export default {

    data () {
      id: 0
    },
    props: ['propId'],
    methods: {
      init() { 
        this.id = this.propId  // step1. assign propId to id
      }
    },
    // add this to your code , this is a MUST. 
    // otherwise you won't SEE your data variable assigned by property
    watch { 
      propId: function(new_value) { 
        this.init()
      }
    }
}
</script>

步骤 3。了解子组件的渲染过程

假设您有两个组件：Parent 和 Child（Child 的属性命名为 propId），并且 Child 也有一个“异步”读取数据库等操作。

// Parent's View

<Child propId='parent_var_id'></Child>

3.1 Parent 被渲染

3.2 Child 被渲染，在这种情况下，parent_var_id 为空

3.3 10ms 之后，parent_var_id 改为 100

3.4 Child 属性 propId 也更改为绑定。

3.5 Child 的 watch 函数被调用，id 中定义的变量 data 发生了变化。