vue2中props的使用

最新推荐文章于 2024-05-07 18:59:47 发布

WangZhuZhuZi

最新推荐文章于 2024-05-07 18:59:47 发布

阅读量489

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/WangZhuZhuZi/article/details/129279468

版权

父组件代码如下：

// 在template中使用
<template>
  <div class="dashboard">
    <pie-component :chart="pieWasteType"></pie-component>
  </div>
</template>

  // 先在父组件中引入
  import PieComponent from '../../../src/views/dashboard/PieComponent.vue'
  import BarComponent from '../../../src/views/dashboard/BarComponent'
  import LineComponent from '../../../src/views/dashboard/LineComponent'
  import TableComponent from '../../../src/views/dashboard/TableComponent'
  import AniComponent from '../../../src/views/dashboard/AniComponent'
  
  export default {
  name: "dashboard",
  // 再注册
  components: {
    PieComponent,
    BarComponent,
    LineComponent,
    TableComponent,
    AniComponent
  },
 data() {
   return {
     pieWasteType: {
          legendData: [],
          seriesData: [
            { value: 335, name: "种类1" },
            { value: 310, name: "种类2" },
            { value: 274, name: "种类3" },
            { value: 235, name: "种类4" },
            { value: 400, name: "其他" },
          ],
        },
  }

子组件代码如下：

// 子组件js部分代码
<script>
export default {
  name: "PieComponent",
  props: {
    title: {
      type: String,
      default: "",
    },
    chart: {
      type: Object,
      default: () => {
        return {
          legendData: [],
          seriesData: [],
        };
      },
    },
  },
// 其他代码
……
}