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


Posted in Javascript onNovember 07, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
关于JavaScript轮播图的实现
Nov 20 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 #Javascript
vue中SPA单页面应用程序详解
Nov 07 #Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 #Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 #Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 #Javascript
vue 运用mock数据的示例代码
Nov 07 #Javascript
vue环境搭建简单教程
Nov 07 #Javascript
You might like
php正则
2006/07/07 PHP
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python文件操作的简单方法总结
2019/11/07 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
社区健康教育工作方案
2014/06/03 职场文书
教师求职自荐书
2014/06/14 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
教你用python控制安卓手机
2021/05/13 Python
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫