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>
这样就可以显示引用视图的内容了