欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue組件父子間通信之綜合練習(xí)（聊天室）-創(chuàng)新互聯(lián)

本文實(shí)例為大家分享了vue組件父子間通信之聊天室的具體代碼，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(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"],
   //通過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>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：vue組件父子間通信之綜合練習(xí)（聊天室）-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://chinadenli.net/article28/ehijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、云服務(wù)器、手機(jī)網(wǎng)站建設(shè)、域名注冊、網(wǎng)站策劃、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管