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

的官方文档

希望这会有所帮助！

如何使用Vue的组件语法在函数外部声明数组

2 个答案: