vuejs2 - vueJS で親から子、子へデータを渡す

Question

別のコンポーネント (EmployeeComponent) 内で quasar フレームワーク dataTable コンポーネントを使用していますが、テーブルのスタイルを変更したいと考えています。EmployeeComponent 内でスタイルを変更した場合、別のコンポーネント内でクエーサー テーブルを使用するたびに、スタイルを書き直すか含める必要があります。そこで、quasar コンポーネントを別のコンポーネント (TableComponent) 内に配置し、スタイルを 1 回だけ変更して、必要な場所に含めます。

クエーサー 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から取得される2つの主要な小道具（データ、列）を取ります

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

   }

}

表コンポーネント

<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 リクエストによって従業員コンポーネントにデータを渡すときに機能しないことです。