vue组件化-简单聊天功能_vue聊天组件

前言

04文件夹，wecaht

vue create wechat，创建文件

一、App.vue

1、用户列表组件

:userlist=“userlist”，组件userlist-com获取App.vue里面data数组userlist的内容
@chooseuser=‘toggleUser’，监听事件toggleUser，用来监听userlistCom.vue里面的chooseuser

//App.vue
<userlist-com @chooseuser='toggleUser' :userlist="userlist"></userlist-com
1
2

2、聊天列表组件

:currentUser=“currentUser”，用来获取事件toggleUser里面的currentUser值，

<chat-com :currentUser="currentUser"></chat-com>
1

3、数据userlist

//App.vue
 data(){
   
    return {
   
      msg:'老陈聊天',
      userlist:[
        {
   
          username:"小明",
          headerimg:require('./assets/img/1.jpeg') 
        },
        {
   
          username:"小黑",
          headerimg:require('./assets/img/2.jpeg') 
        },
        {
   
          username:"小红",
          headerimg:require('./assets/img/3.jpg') 
        },{
   
          username:"小白",
          headerimg:require('./assets/img/4.jpeg') 
        }
      ],
      currentUser:{
   
          username:"小明"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29