如何將VueJS數據傳遞到另一個腳本？

Question

我正在將一個已建立的站點轉換為VueJS，但在實現此目標的最佳方法上遇到了絆腳石。

它使用D3-Funnel（ https://github.com/jakezatecky/d3-funnel ）繪制漏斗圖，但是如何將VueJS數據變量傳遞給圖表構造函數？

<script>
const data = [
    { label: 'Step 1', value: this.step1 },
    { label: 'Step 2', value: this.step2 },
    .......
];
const options = {
    block: {
        dynamicHeight: true,
        minHeight: 15,
    },
};

const chart = new D3Funnel('#funnel');
chart.draw(data, options);
</script>

所以我需要將vue數據變量傳遞到值中。 我的第一個想法是將其移動到VueJS方法對象中的自身函數中，並使用this在其中使用變量。

有沒有更好的方法來實現這一目標？

----------編輯-------------

根據評論，人們希望看到我目前如何實現這一目標。 如上所述，我剛剛在vue方法對象中創建了一個函數，然后調用它。

methods : {
    drawChart(){
        const data = [
            { label: 'Step 1', value: 99999 },
            { label: 'Step 2', value: 9999 },
            .......
        ];
        const options = {
            block: {
                dynamicHeight: true,
                minHeight: 15,
            },
        };

        const chart = new D3Funnel('#funnel');
        chart.draw(data, options);
    }
},
mounted(){
    this.drawChart();
}

數據來自API，並放入vue數據對象。

data:{
    step1: 0,
    step2: 0,
    ....
},
methods:{
    getData(){
        axois.post......
        response{
            this.step1 = response.data.step1
            this.step2 = response.data.step2
            ....
        }
    }
}

Answer 1

據我了解，您正在嘗試將信息傳遞給組件並使用它。 如果您使用單個文件組件和Webpack，則可以執行以下操作，並將其與vue網站上列出的示例放在一起。

您也可以看看這種家伙的方法

App.vue

...
<my-d3-component :d3data="d3Data"></my-d3-component>
...
<script>
  import d3Component from 'path/to/component'
  var app = new Vue({
    el: '#app',
    data: {
      d3Data: {}
    },
    components: {
      'my-d3-component': d3Component
    }
  })
 </script>

d3Component.vue

<template>
  d3 html stuff goes here
</template>
<script>
  export default {
    props: ['d3Data'],
    data() {
      return {}
    },
    mounted: {
      const options = {
        block: {
            dynamicHeight: true,
            minHeight: 15,
        },
    };

    const chart = new D3Funnel('#funnel');
    chart.draw(this.d3Data, options);
  }
}
</script>