data 属性已经被声明为 prop答案

【问题标题】：The data property is already declared as a propdata 属性已经被声明为 prop
【发布时间】：2018-10-25 19:55:12
【问题描述】：

谁能告诉我我在 JavaScript 文件中做错了什么。

我是 Vue.js 的新手，非常感谢您的帮助

Plotly.vue

<template src="../../views/plotlychartshtml/plotlycharts.html"></template>

<script>
    import BarChart from '@/assets/javascripts/plotlychartsBar'

     export default {
    components: {
      'vue-plotly': BarChart 
    }
  }
</script>

plotlycharts.html

<div class="wrapper">
    <div>
        <vue-plotly></vue-plotly>
    </div>
</div>

plotlychartsBar.js

import VuePlotly from '@statnett/vue-plotly'

export default {
  extends: VuePlotly,
  data() {
      return {
         datacollection: {
            data: [{ 
              x: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 
              y: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100] ,
              name: 'Plotly',
              type: 'bar',
            }]
         },
         layout: {},
         options: {},
      }
   },
    mounted() {
      this.datacollection
   }
}

我正在关注本教程 https://github.com/statnett/vue-plotly，但在正确编写 JS 代码时遇到了挑战。

我收到此错误消息，但不确定如何解决：

vue.esm.js?efeb:591 [Vue 警告]：数据属性“options”已被声明为 prop。改用 prop 默认值。

发现于

---> <BarPlotly> at C:\Users\martinha\vue-plotly\src\Plotly.vue
       <Plotlycharts> at src/components/vuePlotly/Plotlycharts.vue
         <App> at src/App.vue
           <Root>

发现于

---> <BarPlotly> at C:\Users\martinha\vue-plotly\src\Plotly.vue
       <Plotlycharts> at src/components/vuePlotly/Plotlycharts.vue
         <App> at src/App.vue
           <Root>

【问题讨论】：

为什么要扩展组件？

标签： vue.js

【解决方案1】：

似乎您在 plotlychartsBar.js 中的组件声明 extends VuePlotly（已经将 options 声明为 prop）而不是在其子 components 中声明它 /strong>：

export default {
  //extends: VuePlotly, <= incorrect
  components: {
    VuePlotly,
  },

【讨论】：

ghybs 非常感谢。我收到另一个错误 - 我很抱歉我对 vue.js 很陌生，所以你的建议会很有帮助。我现在收到此错误[Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. 可以就此提出建议 - 提前谢谢您
这听起来像是一个不同的问题。请使用您的新代码打开一个新问题，而不是修改这个问题。编辑不应该改变手头的问题，否则它变得与cmet和答案无关，对每个人都没有用。

【解决方案2】：

当我遇到同样的问题时，我的搜索中出现了这个问题。

我在使用 @nuxtjs/composition-api 模块时在 Nuxt 中遇到此错误。

我在路由器组件中使用了@nuxtjs/composition-api。我还在调用localVue.use(VueCompositionAPI ) 的测试中使用了createLocalVue。

看起来，如果您在组件中使用 @nuxtjs/composition-api，则无需将 localVue.use(VueCompositionAPI ) 添加到测试中。

【讨论】：