VUE components和template配合使用

1.首先在VUE.JS中引用我们写好的VUE视图对象

2.接下来在HTML部分去使用我们引用的组件

MissionRecordOverviewPanel, PullableListContentPanel

这里要注意，在HTML部分中引用组件的命名规则要从PascalCase(首字母大写的驼峰命名法)→kebab-case(短横线分隔命名)，这是VUE的规定，否则无法引用组件，例如：

MissionRecordOverviewPanel → mission-record-overview-panel

3.下面放上代码HTML代码部分

    <pullable-list-content-panel
      :data="entities"
      @onMoreLoading="handleMoreLoading"
      @onRefreshLoading="handleRefreshLoading"
    >
      <template slot-scope="row">
        <!-- slot 是子组件向父组件传值的途径 带冒号的是表达式 不带冒号的是纯文本 -->
        <!--suppress JSUnresolvedVariable -->
        <mission-record-overview-panel
          :title="`${row.index + 1} - ${row.entity.part_key} 的点检记录`"
          :message=row.entity.generated_date
          :style="panelStyle(row.index)"
          @onCheck="showPopup(row.entity)"
          @onError="showPopup(row.entity)"
        />
      </template>
    </pullable-list-content-panel>

这样就可以显示引用视图的内容了