vue-组件理解-仿QQ列表组件
2021-07-05 本文已影响0人
云高风轻
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 }"> > </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. 组件化的理解
- 组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之一，它使开发者使用小型、 独立和通常可复用的组件构建大型应用；
- 组件化开发能大幅提高应用开发效率、测试性、复用性等；
- 组件使用按分类有：页面组件、业务组件、通用组件；
页面组件:应用的各部分独立内容;比如列表页,详情页
业务组件:具体的业务,具有复用性;比如轮播图组件
通用组件:实现最基本的功能,具有通用性,复用性;比如按钮,评分,布局组件等
- vue 的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函 数，它们基于 VueComponent，扩展于 Vue；
- vue 中常见组件化技术有：属性 prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；
- 合理的划分组件，有助于提升应用性能；
- 组件应该是高内聚、低耦合的；
- 遵循单向数据流的原则。
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 异步组件
