day4 wechat

p20

1.入口文件不需要改。

2.主要工作在App.vue里。

3.创建聊天组件和用户列表组件。注意这里组件名带'-',所以变量名字是驼峰命名的

4.在App.vue中将组件导入,注册组件

5. 检查组件成功了没。先进入文件夹，启动服务器。

6.静态资源放asset下面

 7.显示用户名和头像

在data中编写用户数组。

注意头像的图片必须require进来，否则服务器找不到，无法显示。

将用户列表传到组件中 

下面在usserlist组件里，用props接收传来的用户数组。

在模板中循环输出头像和姓名

 8.为聊天列表写样式，scoped限定样式只能本组件用

9.下面要做的是点击用户，跳出对应的聊天框。简化成，点击人物，聊天框显示姓名的效果。

首先在userlistcom组件里，添加点击事件chooseUser，将index传入。

chooseUser将触发一个chooseuser事件给父元素监听，并将index传出

 

App里面，监听chooseuser事件，触发切换用户的事件

 切换用户事件主要改变当前用户的索引。首先定义索引，指向一个用户对象。

 将currentUser和chatcom绑定

chatcom接收，并显示

 

目前的效果是，点哪个用户，左边就显示用户名。

---

p21 

聊天框组件chatinputcom加到chatcom中。

编写chatinputcom组件

在chatcom中使用，导入以及注册。

聊天组件

创建聊天组件。

图片的样式是通过遍量设置的。

中间用到了插槽。

 在chatcom组件里导入和注册

 循环输出聊天记录里的内容

 下面要讲聊天输入的内容显示到上面。

绑定回车和按键的事件。

这个sendEvent事件是父组件的方法，所以可以修改父组件的数据。

我们这里v-model绑定了变量就是输入框中的内容，$event.target.value也有同样的效果。

在父组件中

 send方法将新的内容转化成对象，添加到chatList中

现在回车和点击绑定send事件，然后出发sendEvent。发完数据后，清空输入框。

 

下面要实现你发一句话，当前和你聊天的人要回你现在的时间。在把你发的话加入到聊天记录列表后，将当前聊天对象生成一个记录，也加进去。内容会现在的时间。

有个坑。$root并不是现在的app，$root.$children[0]才是根组件app