91

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

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

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

4

6 回答 6

88

从该data()方法中，您可以使用this.

所以在你的情况下：

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

  return theData;
}
于 2017-03-10T15:52:02.883 回答
63

编辑：根据 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 }
}
于 2018-12-03T14:30:32.317 回答
13

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

<script>
   export default {
      props: ['messageId'],
      data: function(){
         var theData={
            somevar: "",
            // other object attributes
         }
      },
      watch: {
        messageId: function(newVal) { 
           this.somevar = newVal
        }
      }
   }
于 2017-03-10T15:52:14.607 回答
2

正如@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>

第三步。了解渲染子组件的过程

假设您有两个组件：Parentand Child(Child有一个名为propId) 的属性，并且Child还有一个“异步”操作，例如读取数据库。

// Parent's View

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

3.1Parent得到渲染

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

3.310ms以后，parent_var_id改为100

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

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

于 2021-04-22T01:50:21.060 回答
0 
<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>
于 2018-09-27T08:12:05.180 回答
0

我认为自从几个月前发布该问题以来，您已经完成了解决方案。我昨天遇到了同样的问题，所以没有运气就尝试了上述解决方案。但是，我想为这种情况分享一个替代解决方案，该解决方案对某人有很大帮助。 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>
于 2020-01-14T05:06:30.237 回答