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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
js实现详情页放大镜效果
Oct 28 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php session 检测和注销
2009/03/16 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
原生js实现验证码功能
2017/03/16 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
详解python中requirements.txt的一切
2017/03/03 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
空指针到底是什么
2012/08/07 面试题
《槐乡五月》教学反思
2014/04/25 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
护林防火标语
2014/06/27 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
北京颐和园导游词
2015/01/30 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书