实现展示组件和容器组件

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>

 大家可以看到，是不是比之前清爽了很多，而且相同的代码也没有了。而且效果跟之前也一样。

 因为效果图做不了，大家可以复制代码实操一下，记得展示组件是组件，需要注册！！！！！！

灵感来自于抖音的（渡一---------袁进老师）！！！！