Detaillierte Erläuterung von Chatroom-Beispielen für die Kommunikation zwischen Eltern und Kind in der Vue-Komponente-js-Tutorial-php.cn

Detaillierte Erläuterung von Chatroom-Beispielen für die Kommunikation zwischen Eltern und Kind in der Vue-Komponente

小云云

Freigeben： 2018-01-19 13:50:36

Original

1754 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Erstellung eines umfassenden Übungs-Chatrooms für die Eltern-Kind-Kommunikation vorgestellt. Ich hoffe, dass er für alle hilfreich ist.

<!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>

Nach dem Login kopieren

Umfassende Übung zur Kommunikation zwischen Komponenten:
(Requisiten runter, Ereignisse hoch)
Es gibt 2 Komponenten: Chatroom, Benutzer- Komponente
Benutzerkomponente besteht aus einer Beschriftungseingabetaste
Chatroom besteht aus zwei Benutzerkomponenten und einer Liste

①Rufen Sie Benutzerkomponente im Chatroom auf, um den Namen des Labels anzugeben
②Wenn
in der Benutzerkomponente auf die Schaltfläche klickt, werden die vom aktuellen Benutzer eingegebenen Informationen an die Chatroom-Komponente gesendet. Der Chatroom empfängt die Daten und zeigt sie in der Liste an

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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Swoole und Websocket einfache Chatroom-Implementierungsmethode

So entwickeln Sie einen Chatroom mit PHP

HTML5 neue Technologie socket.io-Methode zur Implementierung eines Chatrooms

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Chatroom-Beispielen für die Kommunikation zwischen Eltern und Kind in der Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!