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

Question

我在另一个组件（EmployeeComponent）中使用了quasar框架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获取数据。我在传递静态数据的情况下使其工作，请参阅下面的代码：

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() {

   }

}

TableComponent

<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请求在员工组件中传递数据时无效。