el-dialog的封装问题？

Question

封装一个Dialog组件，当组件形成三级嵌套时，即Main组件引入Table组件，而在Table组件上点击事件showLabelDetail(scope)弹窗Dialog组件。根据控制台Log显示Dialog组件没有数据，但是Table组件已经将值传过去。

  <div class="main" style="flex:1;padding-top: 5px">
      <keep-alive>
        <Table
          class="table"
          :tableData="tableData"
          :pageSize="pageSize"
          :pageNumber="pageNumber"
        />
      </keep-alive>
    </div>

  <el-table
      :data="
        tableData
      "
      border
      fit
      max-height="500px"
      :highlight-current-row="showFlag"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="clipName" label="clipName">
      </el-table-column>
      <el-table-column prop="calibrationFilePath" label="calibrationFilePath">
      </el-table-column>
      <el-table-column prop="loggingStartTime" label="loggingStartTime">
      </el-table-column>
      <el-table-column prop="labels" label="labels">
        <template slot-scope="scope">
          <el-tag @click="showLabelDetail(scope)">标签</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <Dialog
      :dilogData="dialogData"
      :dialogVisible="dialogVisible"
      :title="dialogTitle"
    ></Dialog>

弹窗事件

 showLabelDetail(scope) {
      console.log("label detail:", scope.row.labels);
      this.dialogData = scope.row.labels;
      this.dialogVisible = true;
    },

如果不封装，直接将Dialog写入Table组件，那就能解决。

Answer 1

<Dialog
  :dilogData="dialogData"
  :dialogVisible="dialogVisible"
  :title="dialogTitle"
></Dialog>

属性里面的 dilogData 敲错了吧，应该是 dialogData ?