vue-微信聊天界面(一)

• 经过前面的基础学习，现在开始学习使用脚手架

• 本节目标界面如下

  
  image.png
• 点击右侧用户列表，左侧聊天界面展示用户名

分析

• 左右两侧分别作为组件

环境准备

• 创建项目vue create wechat

代码展示

• app.vue主界面

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <div class="content">
        <chat-window :currentUser="currentUser"></chat-window>
        // 父组件监控子组件的自定义方法是chooseuser，并触发父元素的toggleUser方法，父元素的这个方法主要是把点击的用户列表数据传给子元素chatWindow组件
        <user-list :userlistdata="userlistdata" @chooseuser="toggleUser"></user-list>
    </div>
  </div>
</template>

<script>
// 引用左右两个组件
import ChatWindow from './components/ChatWindow.vue'
import UserList from './components/UserList.vue'

export default {
  name: 'App',
   // 注册组件
  components: {
    UserList,ChatWindow
  },
  data() {
    return {
      msg: "我的聊天室",
       // 用户列表的数据，传给userlist组件
      userlistdata: [
          {"username": "小明", "headimg": require("./assets/images/1.jpg")},
          {"username": "小红", "headimg": require("./assets/images/2.jpg")},
          {"username": "小黑", "headimg": require("./assets/images/3.jpg")}
      ],
      // 当前用户在聊天左侧界面展示的默认数据,传给chatWindow组件
      currentUser: {
        "username": "小明", "headimg": require("./assets/images/1.jpg")
      }
    }
  },
  methods:{
      toggleUser:function(index){
        this.currentUser = this.userlistdata[index]
    }
  }
}
</script>

<style>
.content {
  width: 800px;
  height: 700px;
  display: flex;
  margin: 0 auto;
  border: 1px solid #cccccc;

}
</style>

• src/components/UserList.vue用户列表组件

<template>
    <div class="userlist">
        <h3>用户列表</h3>
        <ul>
          <!-- userlistdata是父元素传过来的列表数据，接受需要设置props -->
            <li v-for="(item,index) in userlistdata" :key="'userlistdata'+ index" @click="chooseuser(index)">
                <img :src="item.headimg">
                <h4>{{item.username}}</h4>
            </li>
        </ul>
    </div>
</template>
<style scoped>
    .userlist {
        width: 300px;
        height: 700px;
        background: skyblue;
    }
    .userlist ul li {
        display: flex;
    }
    .userlist ul li img {
        width: 80px;
        height: 80px;
    }
</style>
<script>
export default {
    data(){
        return {}
    },
// 接受父元素传过来的用列表数据
    props:["userlistdata"],
    methods:{
        chooseuser:function(index) {
            // 将选择用户事件传给父元素
            this.$emit("chooseuser", index)
        }
    }
}
</script>

• src/components/ChatWindow.vue左侧的聊天记录展示组件

<template>
    <div class="chat">
        <h3>用户聊天界面</h3>
        <p>用户：{{currentUser.username}}</p>
    </div>
</template>

<style scoped>
    .chat 
    {
        width: 500px;
    }

</style>


<script>
export default {
    data() {
        return {}
    },
    props:["currentUser"]
}
</script>

• 本系列代码学习，来自于老陈的B站