vue组件父子间通信之综合练习（聊天室）

2024-05-06 15:24:45

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了vue组件父子间通信之聊天室的具体代码，供大家参考，具体内容如下

<!doctype html><html> <head> <meta charset="UTF-8"> <title>组件父子间通信之综合练习</title> <script src="js/vue.js"></script> </head> <body> <div id="container">  <p>{{msg}}</p>  <chat-room></chat-room> </div> <script>// 创建父组件  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>   `  }) //创建子组件   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:`    <div>     <label>{{userName}}</label>     <input type="text" v-model="userInput"/>     <button @click="sendChat">发送</button>    </div>   `  })  new Vue({   el:"#container",   data:{    msg:"Hello VueJs"   }  }) </script> </body></html>

组件间通信综合练习：
（props down,events up）
有2个组件：chat-room,user-component
user-component是由label input button构成
chat-room是由两个user-component和一个列表构成

①在chat-room调用user-component指定label的名字
②在user-component，
点击按钮时，将当前用户输入的信息发送给chat-room组件，chat-room接收到数据显示在列表中

代码：

<!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("在父组件中接收子组件传来的数据"+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 () {  //触发toFatherEvent的事件，把input中  //用户输入的数据发送  this.$emit("sendToFather",this.userName+":"+this.userInput);  } }, template:`  <div>  <label>{{userName}}</label>  <input type="text" v-model="userInput"/>  <button @click="sendToFather">发送</button>  </div>  ` }) new Vue({ el: '#container',  data: {  msg: 'Hello Vue'  } })</script></body></html>

上一篇：基于vue实现分页效果

下一篇：vue双花括号的使用方法附练习题