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

vue.js Vue.js

西门JinJin

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

第629篇《在Vue组件数据功能中访问道具》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
村村樱 2020.03.11

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

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

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

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

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

data() {
    return { somevar: this.messageId }
}
卡卡西乐逆天 2020.03.11

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

因此，在您的情况下：

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

  return theData;
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android