本文實(shí)例為大家分享了vue組件父子間通信之聊天室的具體代碼,供大家參考,具體內(nèi)容如下
成都創(chuàng)新互聯(lián)公司是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),網(wǎng)絡(luò)空間、主機(jī)租用、主機(jī)托管,四川、重慶、廣東電信服務(wù)器租用,中國(guó)電信云錦天府,成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國(guó)大陸、港澳臺(tái)以及歐美等多個(gè)國(guó)家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>組件父子間通信之綜合練習(xí)</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <chat-room></chat-room> </div> <script> // 創(chuàng)建父組件 Vue.component("chat-room",{ //data屬性中的chatList保存用戶聊天信息 data:function(){ return{ chatList:[] } }, template:` <div> //假的聊天室 <h2>假的聊天室</h2> <user-component userName="Rose"></user-component> <user-component userName="Jack"></user-component> //顯示用戶的聊天信息 <ul> <li v-for="tmp in chatList">{{tmp}}</li> </ul> </div> ` }) //創(chuàng)建子組件 Vue.component("user-component",{ props:["userName"], //通過(guò)v-model把用戶輸入的數(shù)據(jù)保存到userInput數(shù)組 data:function(){ return { userInput:[] } }, methods:{ //把用戶輸入的數(shù)據(jù)以及用戶名label信息push給chatList數(shù)組 sendChat:function(){ this.$parent.chatList.push(this.userName+":"+this.userInput); //情況input框 this.userInput =" "; } }, template:` <div> <label>{{userName}}</label> <input type="text" v-model="userInput"/> <button @click="sendChat">發(fā)送</button> </div> ` }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
組件間通信綜合練習(xí):
(props down,events up)
有2個(gè)組件:chat-room,user-component
user-component是由label input button構(gòu)成
chat-room是由兩個(gè)user-component和一個(gè)列表構(gòu)成
①在chat-room調(diào)用user-component指定label的名字
②在user-component,
點(diǎn)擊按鈕時(shí),將當(dāng)前用戶輸入的信息發(fā)送給chat-room組件,chat-room接收到數(shù)據(jù)顯示在列表中
代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title></title> </head> <body> <div id="container"> <chat-room></chat-room> </div> <script> Vue.component('chat-room',{ methods:{ recvMsg:function(msg){ console.log("在父組件中接收子組件傳來(lái)的數(shù)據(jù)"+msg); this.chatList.push(msg); } }, data: function () { return { chatList:[] } }, template:` <div> <h2>假的聊天室</h2> <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> </div> ` }) Vue.component('user-component',{ props:['userName'], data: function () { return { userInput:'' } }, methods:{ sendToFather: function () { //觸發(fā)toFatherEvent的事件,把input中 //用戶輸入的數(shù)據(jù)發(fā)送 this.$emit("sendToFather",this.userName+":"+this.userInput); } }, template:` <div> <label>{{userName}}</label> <input type="text" v-model="userInput"/> <button @click="sendToFather">發(fā)送</button> </div> ` }) new Vue({ el: '#container', data: { msg: 'Hello Vue' } }) </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站名稱:vue組件父子間通信之綜合練習(xí)(聊天室)
本文網(wǎng)址:http://bm7419.com/article32/goiosc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司、靜態(tài)網(wǎng)站、定制開(kāi)發(fā)、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)