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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
ES6中数组array新增方法实例总结
Nov 07 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php分页示例分享
2014/04/30 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
九种原生js动画效果
2015/11/11 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
安全生产月演讲稿
2014/05/09 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
技术负责人岗位职责
2015/02/10 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python