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

要将一个数据属性赋值给一个props，可以使用watcher，如下：

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

Answer 3

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

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

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

上一个POST：

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

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

因为this不会指向组件。相反，使用一个简单的函数：

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

或按照 Siva Tumma 的建议使用 ES6 对象方法 shorthand：

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

Answer 5

自从几个月前发布问题以来，我认为您已经完成了解决方案。我昨天遇到了同样的问题，所以没有运气就尝试了上述解决方案。但是，我想分享一个对这种情况有很大帮助的替代解决方案。 watch 有一些属性可以处理这些类型的案例。下面的 scrips 显示我们如何接受 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 组件，并且想通过 props 设置 data 变量，您必须同时使用 this 和 watch 函数：

第一步。使用 `this` 访问 `props` 变量。

<script>
export default {

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

第二步。观察 `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>

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

假设您有两个组件：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 已更改。

vue组件数据函数中访问props

Accessing props in vue component data function

vue.js

vue-loader

第一步。使用 `this` 访问 `props` 变量。

第二步。观察 `props` 变量

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

vue组件数据函数中访问props

Accessing props in vue component data function

vue.js

vue-loader

第一步。使用 this 访问 props 变量。

第二步。观察 props 变量

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

第一步。使用 `this` 访问 `props` 变量。

第二步。观察 `props` 变量