场景:首页展示柱状图功能,定义好柱状图,将其引入首页展示

 

 

   <a-col :span="18">
                <a-space direction="vertical" style="width: 100%">
                  <PayOrderCountChart ref="payOrderCountChart" :totalData='totalData' />
                </a-space>
    </a-col>
import PayOrderCountChart from './chart/PayOrderCountChart.vue'

 下面是目录:

在setup(){}里定义了我想传的一个数据(数组) 

setup(){
 const totalData = [100, 200, 300, 200, 100, 60]
}
return {
      totalData,
}

-----------------------------------------------------------------------------------------------------------------------------

以上是父页面,子页面示例:

export default defineComponent({
  name: 'PayOrderCountChart',
  props: {
    totalData: [],
  },
})
setup(props) {
    const p = toRefs(props);
    console.log(p.totalData.value, '---------')
}

以上是源代码示例

自我总结:首先在父页面定义你想传的数据,然后在你引入的组件那里:datat绑定,然后在定义的组件setup那里接受,我所理解的就是像小程序跳页面传参一样;上述代码和总结仅供参考

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐