在Vue组件数据功能中访问道具

西门JinJin2020-03-11

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

<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数据中的道具呢？

村村樱2020/03/11 11:53:35

请注意，如果您使用箭头功能分配数据，则此方法不起作用：

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

因为this不会指向该组件。而是使用一个普通函数：

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

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

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

卡卡西乐逆天2020/03/11 11:53:35

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

因此，在您的情况下：

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

  return theData;
}

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer