1.前言

思想性的概念比较枯燥,放后面
这 聊天界面的分组 组件比较简单
就先把这个写了吧
我是分为了2个组件 一个是具体的好友列表 组件
一个是 分组 组件

1.gif

---

组件的过程

组件配置 --->VueComponent实例--->render()--->VirtualDOM--->DOM

所以组件的本质是产生虚拟DOM

---

2. 数据结构

其实看着界面就能想到数据结构,看到数据结构就能想到代码的结构

 friends: [
        {
          name: "同学",
          list: [
            { name: "祥子", sign: "让自己放肆的笑", online: true },
            { name: "静静", sign: "时光是陪你最久的爱人", online: true },
            { name: "影子", sign: "不忘初心,方得始终", online: true },
          ],
        },
        {
          name: "家人",
          list: [
            { name: "爸爸", sign: "家和万事兴", online: true },
            { name: "妈妈", sign: "平安是福", online: true },
            { name: "大姐", sign: "", online: false },
            { name: "二姐", sign: "今天天气不错,遛娃", online: false },
          ],
        },
        {
          name: "朋友",
          list: [
            { name: "老船长", sign: "相信别人往往比相信自己更简单", online: true },
            { name: "老马", sign: "菩提本无树,明镜亦非台", online: true },
            { name: "艳子", sign: "春有百花秋有月，夏有凉风冬有雪。若无闲事挂心头，便是人间好时节。", online: true },
            { name: "老化", sign: "年轻没有失败,奋斗成就男人!", online: false },
          ],
        },
      ],

---

3. 好友列表组件

先来个简单 列表组件

<template>
  <!-- 仿 QQ 列表 -->
  <li class="yzs-list">
    <h3>{{ person.name }}</h3>
    <span>{{ person.sign }}</span>
  </li>
</template>

<script>
export default {
  props: {
    person: {
      required: true,
      type: Object,
    },
  },
};
</script>

<style lang="less" scoped>
.yzs-list {
  text-align: left;
  background-color: white;
  list-style: none;
  color: #666;
  border-bottom: 1px solid #333;
}
</style>

---

4. 分组组件

里面用到上面的 好友列表组件
注意 箭头的样式 使用旋转
行内元素设置 transform无效,转换为 行内块
计算属性 计算 在线人数
filter 用法 箭头函数基础

<template>
  <div class="group-root" @click="groupCk">
    <div class="group-top">
      <span :class="{ arowdown: isOpen }"> &gt; </span>
      <span>{{ groupOb.name }}</span>
      <span class="rt">{{ onlineNumber }}/{{ groupOb.list.length }}</span>
    </div>
    <ul v-show="isOpen">
      <Component-List
      v-for="(friendList, index) in  groupOb.list" :key="index"
        :person="friendList"
      ></Component-List>
    </ul>
  </div>
</template>

<script>
import ComponentList from "@/components/list";

export default {
  props: {
    groupOb: {
      type: Object,
    }
  },
  data: function () {
    return {
      isOpen: false,
    };
  },
  computed: {
    onlineNumber() {
      // 还有个.list
      return this.groupOb.list.filter((item) => {
        return item.online;
      }).length;
    },
  },
  methods: {
    groupCk() {
      this.isOpen = !this.isOpen;
    },
  },
  components: {
    ComponentList,
  }
};
</script>

<style lang="less" scoped>
.group-root {
  text-align: left;
  .group-top {
    background-color: #dedede;
    height: 50px;
    line-height: 50px;
    padding: 5px;
    margin-bottom: 5px;
  }
  .rt {
    float: right;
  }
  /* 注意名字不要带- */
  .arowdown {
    transform: rotate(90deg);
    display: inline-block;
  }
}
</style>

---

5.使用

注意 v-for绑定下 key

      <Component-Group
        v-for="(groupInfo, index) in friends"
        :key="index"
        :groupOb="groupInfo"
      >
      </Component-Group>

---

6. 组件化的理解

1. 组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之一，它使开发者使用小型、 独立和通常可复用的组件构建大型应用；

2. 组件化开发能大幅提高应用开发效率、测试性、复用性等；

3. 组件使用按分类有：页面组件、业务组件、通用组件；

页面组件:应用的各部分独立内容;比如列表页,详情页
业务组件:具体的业务,具有复用性;比如轮播图组件
通用组件:实现最基本的功能,具有通用性,复用性;比如按钮,评分,布局组件等

4. vue 的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函 数，它们基于 VueComponent，扩展于 Vue；

5. vue 中常见组件化技术有：属性 prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；

6. 合理的划分组件，有助于提升应用性能；

7. 组件应该是高内聚、低耦合的；

8. 遵循单向数据流的原则。

---

7.组件的使用

1.定义

Vue.component(), components

2. 分类

有状态组件, function ,abstract

3.通信

props ,$emit()/$on , provide/enject, $children/$parent/$root/$attrs/$listeners

4.内容分发

slot tempalte v-slot

5.使用及优化

is keep-alive 异步组件

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉