ホームページ > 記事 > ウェブフロントエンド > vue コンポーネントでの父と息子間のコミュニケーションのためのチャット ルームの詳細な例
この記事では主に、Vue コンポーネントでの親子コミュニケーションのための総合的な練習用チャット ルームの作成について詳しく紹介します。興味のある方は参考にしていただければ幸いです。
<!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>
コンポーネント間通信に関する包括的な演習:
(プロパティは下、イベントは上)
2 つのコンポーネントがあります: チャット ルーム、ユーザー コンポーネント
ユーザー コンポーネントはラベル入力ボタンで構成されます
チャット ルームはユーザーコンポーネントとリストは 2 つで構成されます
①チャットルームでユーザーコンポーネントを呼び出してラベル名を指定します
②ユーザーコンポーネントでは、
ボタンをクリックすると現在のユーザーが入力した情報が表示されますはチャット ルーム コンポーネントに送信され、chat- ルームで受信したデータがリストに表示されます
コード:
<!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('chat-room',{ 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('user-component',{ props:['userName'], data: function () { return { userInput:'' } }, 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: '#container', data: { msg: 'Hello Vue' } }) </script> </body> </html>
関連する推奨事項:
Node.js を使用して複数人のリアルタイム オンライン チャット ルームを作成します
php websocket を使用してシンプルなチャット ルームを作成します
以上がvue コンポーネントでの父と息子間のコミュニケーションのためのチャット ルームの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。