如何在 vue 的组件语法中声明函数外部的数组

Question

我想在组件内部声明一个全局数组vue.js以便我可以在所有方法中访问它。在组件的哪个部分声明它？

我尝试在PROPS中设置，但是当我需要数组类型时，它会生成一个对象。

export default{  
   name:"BarElement",
   props:[  
      "labels",
      "dataset",
      "colors"
   ],
   methods:{  
      drawGraph() {  
         var dataPoints =[]; 
         var dataPoint =this.getDataPoint(upperLeftCornerX,nextX,value); 
         this.dataPoints.push(dataPoint);
      }      
      getDataPoint(x, nextX, value) {  
         return {  
            'leftEdge':x,
            'rightEdge':nextX,
            'value':value
         }
      },
      showToolTip(event) {  
         var mouseX = event.offsetX; 
         var toolTipVal = this.dataPoints.forEach(function(item, key) {  
            if(mouseX >= item.leftEdge && mouseX <= item.leftEdge ) 
            return item.value;
         });     
         console.log(toolTipVal);
      }
   }

Answer 1

尝试在数据对象中声明它

data () {
    myArray:[]
 }

你也可以将 props 声明为一个对象，因为这将允许指定 props 的类型

props: {
  labels: Array,
  dataset: Array,
  colors: Object
}

如果希望该类型的所有组件共享同一个数组，请在 export default 语句之外声明该数组。

Answer 2

好吧，在您的组件中，您可以使用数据声明为函数，这将在您的函数本地进行。

name: "BarElement",
props: ["labels", "dataset", "colors"],
data: function() {
    return {
        foo: {
            text: 'text1'
        }
    }
}

如果要在应用程序组件中声明全局数组。

与组件类似，您可以在其中添加数据。

现在，要访问该数据，您可以将其与 this.$root.[nameOfObject] .

以下是$root的官方文档

希望这有帮助！