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

2、聊天列表组件

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

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

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:"小明"