Home >Web Front-end >JS Tutorial >Detailed example of chat room for communication between father and son in vue component

Detailed example of chat room for communication between father and son in vue component

小云云Original: 2017-12-26 13:28:152104browse

This article mainly introduces in detail the creation of a comprehensive practice chat room for parent-child communication in the Vue component. It has a certain reference value. Interested friends can refer to it. I hope it can help everyone.

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件父子间通信之综合练习</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
  <chat-room></chat-room>
 </p>
 <script>

// 创建父组件
  Vue.component("chat-room",{
  //data属性中的chatList保存用户聊天信息
   data:function(){
    return{
     chatList:[]
    }
   },
   template:`
    <p>
     //假的聊天室
     <h1>假的聊天室</h1>
     <user-component userName="Rose"></user-component>
     <user-component userName="Jack"></user-component>
     //显示用户的聊天信息
     <ul>
      <li v-for="tmp in chatList">{{tmp}}</li>
     </ul>
    </p>
   `
  })
 //创建子组件 
  Vue.component("user-component",{
   props:["userName"],
   //通过v-model把用户输入的数据保存到userInput数组
   data:function(){
    return {
     userInput:[]
    }
   },
   methods:{
    //把用户输入的数据以及用户名label信息push给chatList数组
    sendChat:function(){
     this.$parent.chatList.push(this.userName+":"+this.userInput);
     //情况input框
     this.userInput =" ";
    }
   },
   template:`
    <p>
     <label>{{userName}}</label>
     <input type="text" v-model="userInput"/>
     <button @click="sendChat">发送</button>
    </p>
   `
  })
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs"
   }
  })
 </script>
 </body>
</html>

Comprehensive exercise on inter-component communication:
(props down, events up)
There are 2 components: chat-room, user-component
user-component is composed of label input button
chat-room is composed of two user-component and a list

① Call user-component in chat-room to specify the name of the label
② In user-component,
When the button is clicked, the information entered by the current user is sent to the chat-room component, and chat-room receives the data and displays it in the list

Code:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <chat-room></chat-room>
</p>

<script>
 Vue.component(&#39;chat-room&#39;,{
  methods:{
   recvMsg:function(msg){
    console.log("在父组件中接收子组件传来的数据"+msg);
    this.chatList.push(msg);
   }
  },
 data: function () {
  return {
  chatList:[]
  }
 },
 template:`
  <p>
    <h1>假的聊天室</h1>
  <ul>
   <li v-for="tmp in chatList">
   {{tmp}}
   </li>
  </ul>
  <user-component userName="Lucy" @sendToFather="recvMsg"></user-component>
  <user-component userName="Merry" @sendToFather="recvMsg"></user-component>
  </p>
  `
 })

 Vue.component(&#39;user-component&#39;,{
 props:[&#39;userName&#39;],
 data: function () {
  return {
  userInput:&#39;&#39;
  }
 },
 methods:{
  sendToFather: function () {
  //触发toFatherEvent的事件，把input中
  //用户输入的数据发送
  this.$emit("sendToFather",this.userName+":"+this.userInput);
  }
 },
 template:`
  <p>
  <label>{{userName}}</label>
  <input type="text" v-model="userInput"/>
  <button @click="sendToFather">发送</button>
  </p>
  `
 })
 new Vue({
 el: &#39;#container&#39;,
  data: {
  msg: &#39;Hello Vue&#39;
  }
 })
</script>

</body>
</html>

Related recommendations:

How to develop a chat room with PHP

Write multi-person real-time online chat with Node.js Room

How to create a simple chat room using php websocket

The above is the detailed content of Detailed example of chat room for communication between father and son in vue component. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation on how to solve the problem of unique settings in mongoose not taking effect and how to remove unique restrictionsNext article：Detailed explanation on how to solve the problem of unique settings in mongoose not taking effect and how to remove unique restrictions

See more

Detailed example of chat room for communication between father and son in vue component

Related articles