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

Question

我将 props 传递给组件：

    <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的方式不对。 那么如何访问data中的props messageId呢？

Answer 1

编辑：根据 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 2

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

所以在你的情况下：

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

  return theData;
}

Answer 3

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

如果您正在渲染一个Child 组件，并且想通过props 设置data 变量，则必须同时使用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 函数被调用，data 中定义的变量id 发生了变化。

Answer 4

要分配一个等于props的数据属性，可以使用watcher，如下：

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

Answer 5

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

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

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