自己写了一个组件,希望能封装成为通用的组件,在父组件使用它时,通过父组件提供的数据源能够渲染对应的数据,从而实现组件复用的效果?
这是写好的子组件:
<template>
<div class="wrapper center-table">
<!-- 循环遍历数组中每一项 -->
<el-row v-for="(item, index) in list" :key="index" class="table-col">
<el-col v-for="(item2, index2) in item" :key="index2" :span="24 / item.length" class="table-item">
<span class="label">{{ item2.title }}</span>
<span class="value">{{ item2.value }}</span>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => [
[{ title: '工站', value: 'OP_03' }],
[{ title: 'SN', value: '11111111' }, { title: 'Time', value: '11:22' }],
[{ title: 'Result', value: 'OK/NG' }],
[{ title: 'Name', value: '' }, { title: 'Key', value: '' }]
]
}
}
}
</script>
<style lang="less" scoped>
.wrapper {
width: 100%;
border: solid 1px #eaf2f8;
height: 40px;
.table-col:not(:last-child) {
border-bottom: solid 1px #eaf2f8;
}
.table-item:not(:last-child) {
border-right: solid 1px #eaf2f8;
}
.table-col {
height: 100%;
display: flex;
}
.table-item {
height: 100%;
display: flex;
>div {
display: flex;
}
.label {
display: flex;
align-items: center;
width: 50%;
// text-align: left;
background: #f2f9fc;
color: #666;
// padding: 8px 12px;
}
.value {
display: flex;
width: 50%;
align-items: center;
word-wrap: break-word;
color: #222;
font-size: 14px;
// padding: 8px 12px;
flex: 1;
}
:deep(.center-table td),
:deep(.center-table th) {
text-align: center !important;
}
}
}
在父组件中引入子组件后,怎样把数据渲染过去并展示出内容
回复
1个回答
test
2024-07-01
<template>
<div>
<your-component-name :list="parentList"></your-component-name>
</div>
</template>
<script>
import YourComponentName from './YourComponentName.vue' // 导入你的子组件
export default {
components: {
'your-component-name': YourComponentName
},
data() {
return {
parentList: [
[{ title: '工站', value: 'OP_03' }],
[{ title: 'SN', value: '11111111' }, { title: 'Time', value: '11:22' }],
[{ title: 'Result', value: 'OK/NG' }],
[{ title: 'Name', value: '' }, { title: 'Key', value: '' }]
]
}
}
}
</script>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容