父组件
将详情对话抽取为一个组件,父组件 html 把具体代码替换为子组件标签。需要传递的数据通过 v-bind 或者 冒号绑定子组件中 props['属性名a','属性名b',...] 字段名,如下:
<!-- 详情对话框 -->
<detail-dialog :logData="logData"
:workOrderDetailDialogVisible="workOrderDetailDialogVisible"
:workOrderDetailTableData="workOrderDetailTableData"/>
在 script 中 import 组件,export 中 components:{} 好。 data中是要传递的多个值,分别是 日志数据、是否显示、工单数据。
<script>
import detailDialog from '../../components/installWorkOrder/InstallWorkOrderDetailDialog'
export default {
components: { detailDialog },
data () {
return {
// 详情对话 -日志详情
logData: [],
// 详情对话 -工单详情
workOrderDetailDialogVisible: false,
workOrderDetailTableData:{}
}
}
</script>
子组件
子组件中,HTML 放入具体的代码。
<div>
<el-dialog title="工单详情"
width="85%"
:append-to-body='true'
:visible.sync="workOrderDetailDialogVisible"
class="demo-ruleForm">
<el-form
:model="workOrderDetailTableData"
label-width="180px">...</el-form>
<el-table
:data="logData"
style="width: 90%;margin: 0 auto">...</el-table>
</el-dialog>
</div>
注意数据不再从 data 中获取,而是从 props 中拿父组件传递过来的数据。
<script>
export default {
props: ['logData', 'workOrderDetailDialogVisible', 'workOrderDetailTableData'],
data () {
return {
}
}
}
</script>