vuejs2 - 在 vueJS 中将数据从父级传递给子级

Question

我在另一个组件（EmployeeComponent）中使用类星体框架 dataTable 组件，但我想更改表格的样式。如果我在 EmployeeComponent 中更改样式，则每次我想在任何其他组件中使用 quasar 表时都需要重写样式或包含它。因此，我将 quasar 组件放在另一个组件（TableComponent）中，并且只更改一次样式并将其包含在我想要的任何位置。

这是 quasar dataTable 组件：

 <q-table
    title="Table Title"
    :data="tableData"
    :columns="columns"
    :rows-per-page-options=[1,2]
    :selection="selection"
    :selected.sync="selected"
    row-key="name"
/>

它需要两个主要的道具（数据，列），它们将从 Tablecomponent 中选择

<table-component :tableThs="tableThs" :tableTds="tableTds"></table-component>

Tablecomponent 将从 EmployeeComponent 获取数据。我让它在传递静态数据的情况下工作，见下面的代码：

员工组件

<template>
   <table-component :tableThs="tableThs" :tableTds="tableTds"></table-
   component>
</template>

<script>
 export default {
     data: () =>({
         tableThs: [
              {
                  name: 'desc',
                  required: true,
                  label: 'Dessert (100g serving)',
                  align: 'left',
                  field: 'name',
                  sortable: true
              },
              {
                  name: 'desc1',
                required: true,
                label: 'Calories',
                align: 'left',
                field: 'calories',
                sortable: true
            },
            {
                name: 'desc2',
                required: true,
                label: 'Carbs',
                align: 'left',
                field: 'carbs',
                sortable: true
            },
            {
                name: 'desc3',
                required: true,
                label: 'Protein',
                align: 'left',
                field: 'protein',
                sortable: true
            },
            {
                name: 'desc4',
                required: true,
                label: 'Sodium',
                align: 'left',
                field: 'sodium',
                sortable: true
            },
            {
                name: 'desc5',
                required: true,
                label: 'Calcium',
                align: 'left',
                field: 'calcium',
                sortable: true
            },
            {
                name: 'desc6',
                required: true,
                label: 'Iron',
                align: 'left',
                field: 'iron',
                sortable: true
            }
       ],
       tableTds: [
            {
                name: 'Frozen Yogurt',
                calories: 19,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
            {
                name: 'Frozen Yogurt1',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
            ,
            {
                name: 'Frozen Yogurt2',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
            ,
            {
                name: 'Frozen Yogurt3',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
            ,
            {
                name: 'Frozen Yogurt4',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: '14%',
                iron: '1%'
            },
        ]
   }),
   mounted() {

   }

}

表格组件

<template>
  <q-table
      title="Table Title"
      :data="tableData"
      :columns="columns"
      :rows-per-page-options=[1,2]
      :selection="selection"
      :selected.sync="selected"
      row-key="name"
  />
</template>

<script>
 export default {
     props: ['tableThs', 'tableTds'],
     data: () =>({
         columns: [],
         tableData: [],
         selection: 'multiple',
         selected: [
          // initial selection; notice we specify the
          // row-key prop of the selected row
          { name: 'Ice cream sandwich' }
      ]
   }),
   beforeMount() {
       this.columns = this.tableThs;
       this.tableData = this.tableTds;
   }
}
</script>

 <style>
   .row{
      margin-left: 0;
      margin-right: 0;
   }
  .q-table-bottom{
     border-top: 0;
  }
 </style>

问题是通过 axios 请求在员工组件中传递数据时它不起作用。