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 相关文章推荐
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHP实现简易blog的制作
2016/10/24 PHP
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的mysql数据库的更新如何实现
2017/07/31 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
python wsgiref源码解析
2021/02/06 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
红领巾心向党广播稿
2014/01/19 职场文书
狼和鹿教学反思
2014/02/05 职场文书
会计系毕业求职信
2014/08/07 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
2015年教学工作总结
2015/04/02 职场文书
如何写通讯稿
2015/07/22 职场文书
大学体育课感想
2015/08/10 职场文书
健康教育主题班会
2015/08/14 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书