Javascript 如何将VueJS数据传递给其他脚本？

我正在将一个已建立的站点转换为VueJS，但在实现这一点的最佳方法上遇到了障碍

它使用D3漏斗（）绘制漏斗图，但如何将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>

数据来自API并放入vue数据对象

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

---

据我所知，您正试图将信息传递给组件并使用它。如果您使用的是单文件组件和网页包，您可以执行类似的操作，这些操作与vue网站上列出的示例结合在一起

你也可以看看这些家伙

App.vue

。。。
...
从“路径/到/组件”导入组件
var app=新的Vue({
el:“#应用程序”，
数据：{
数据：{}
},
组成部分：{
“my-d3-component”：d3Component
}
})

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>

D3HTML的东西在这里
导出默认值{
道具：['d3Data']，
数据（）{
返回{}
},
安装：{
常量选项={
区块：{
没错，
身高：15，
},
};
常数图=新的D3漏斗（“#漏斗”）；
图表.绘图（此.D3数据，选项）；
}
}

您能告诉我们您在vue上做了哪些尝试吗？那么这些数据实际上来自哪里？它是根组件中的数据对象吗？如果是这样的话，您目前是如何设置数据的？您可能想制作一个漏斗图组件。更新帖子以回答评论中的问题您的问题是将数据从组件a传输到组件B，对吗？

...
<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>

<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>