快捷導(dǎo)航

vue組件父子間通信之綜合練習(xí)（聊天室）

更新時間：2017年11月07日 11:17:06 作者：匿名的girl

這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信之綜合練習(xí)聊天室制作，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

<!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>
     //假的聊天室
     <h1>假的聊天室</h1>
     <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>

組件間通信綜合練習(xí)：
（props down,events up）
有2個組件：chat-room,user-component
user-component是由label input button構(gòu)成
chat-room是由兩個user-component和一個列表構(gòu)成

①在chat-room調(diào)用user-component指定label的名字
②在user-component，
點(diǎn)擊按鈕時，將當(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("在父組件中接收子組件傳來的數(shù)據(jù)"+msg);
    this.chatList.push(msg);
   }
  },
 data: function () {
  return {
  chatList:[]
  }
 },
 template:`
  <div>
    <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>
  </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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: