ok,今天小编来说说如何实现展示组件和容器组件,在这之前我们来了解一下什么是展示组件,什么是容器组件。
什么是展示组件
所谓的展示组件,就是让用户所看到页面,拿我毕业设计来说:
好的,大家看这两张图,这就是展示组件。
什么是容器组件
所谓的容器组件就是交互,例如用户在进行修改数据,新增数据时就需要在容器组件完成。
正题
好的,可能小编的表达方式大家可能听不懂或者还是懵懂的,那小编直接上代码就知道什么是容器组件什么是展示组件了。
一般来说,如果我们要做上面两张图片的内容,是不是正常情况下写两边大部分一模一样的代码,例如我做的demo
<template>
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
<el-table-column label="Operations">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
Edit
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>
Delete
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
interface User {
date: string
name: string
address: string
}
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
<style scoped></style>
<template>
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="名字" width="180" />
<el-table-column label="Operations">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
Edit
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>
Delete
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
interface User {
date: string
name: string
}
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
},
{
date: '2016-05-02',
name: 'Tom',
},
{
date: '2016-05-04',
name: 'Tom',
},
{
date: '2016-05-01',
name: 'Tom',
},
]
</script>
<style scoped></style>
大家这两张图片,它们除了少一个地址,其他功能都一模一样。但是我们则需要多写一边相差不差的代码,这显着我们项目太过于臃肿,而且重复代码太多,后期也不太好维护。这时我们就可以把他们拆解为展示组件和容器组件了。
展示组件
<template>
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
v-for="(item, index) in tableColumn"
:key="index"
/>
<el-table-column label="Operations">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
Edit
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>
Delete
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
type RecordType = Record<string, unknown>
interface Props {
tableData: RecordType[] //传入过来的数据
tableColumn: RecordType[] //表格列配置
}
const props = defineProps<Props>()
//自定义事件集合
const emit = defineEmits(['edit', 'delete'])
const handleEdit = (index: number, row: Record<string, unknown>[]) => {
emit('edit', index, row)
}
const handleDelete = (index: number, row: Record<string, unknown>[]) => {
emit('delete', index, row)
}
</script>
<style scoped></style>
然后容器组件
<template>
<div id="app">
<TableList
:tableData="tableData"
@edit="handleEdit"
@delete="handleDelete"
:tableColumn="tableColumn"
/>
</div>
</template>
<script setup lang="ts">
import TableList from '@/components/TableList/index.vue'
import { ref } from 'vue'
interface User {
date: string
name: string
address: string
}
interface Column {
label: string
prop: string
width: string
}
const tableColumn = ref<Column[]>([
{
label: '时间',
prop: 'date',
width: '120',
},
{
label: '名字',
prop: 'name',
width: '260',
},
{
label: '地址',
prop: 'address',
width: '260',
},
])
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
const tableData = ref<User[]>([
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'John',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles',
},
])
</script>
<style scoped></style>
<template>
<div id="app">
<TableList
:tableData="tableData"
@edit="handleEdit"
@delete="handleDelete"
:tableColumn="tableColumn"
/>
</div>
</template>
<script setup lang="ts">
import TableList from '@/components/TableList/index.vue'
import { ref } from 'vue'
interface User {
date: string
name: string
}
interface Column {
label: string
prop: string
width: string
}
const tableColumn = ref<Column[]>([
{
label: '时间',
prop: 'date',
width: '120',
},
{
label: '名字',
prop: 'name',
width: '260',
},
])
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
const tableData = ref<User[]>([
{
date: '2016-05-03',
name: 'Tom',
},
{
date: '2016-05-02',
name: 'Tom',
},
{
date: '2016-05-04',
name: 'Tom',
},
{
date: '2016-05-01',
name: 'Tom',
},
])
</script>
<style scoped></style>
大家可以看到,是不是比之前清爽了很多,而且相同的代码也没有了。而且效果跟之前也一样。
因为效果图做不了,大家可以复制代码实操一下,记得展示组件是组件,需要注册!!!!!!
灵感来自于抖音的(渡一---------袁进老师)!!!!