vue3引入组件，并给组件传值

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

 

 

   <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那里接受，我所理解的就是像小程序跳页面传参一样；上述代码和总结仅供参考