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组件父子间通信02
三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...
- Vue组件父子间通信01
子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...
- Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...
- vuex-- Vue.的中心化状态管理方案（vue 组件之间的通信简化机制）
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- vue组件之间的通信， 父子组件通信，兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- vue组件之间的通信，父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
- vue父子间通信案列三($emit和prop用法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue父子间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue组件之间的通信
1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...
随机推荐
- 解决HTML乱码
转自:https://blog.csdn.net/yuxisanno139/article/details/80675426
- KFK2060穿越者
- MFC学习笔记3---使对话框风格与系统统一
有一件郁闷了我很久的事情,在VS中编辑对话框或者点击预览时都是以Win7风格体现的按钮及对话框: 点击上图测试对话框: 然而生成的应用程序却是这样的: 这样人很不爽啊,按钮风格回到了N年前的版本,复古 ...
- fhq_treap || BZOJ 3223: Tyvj 1729 文艺平衡树 || Luogu P3391 【模板】文艺平衡树（Splay）
题面: [模板]文艺平衡树(Splay) 题解:无 代码: #include<cstdio> #include<cstring> #include<iostream> ...
- JAVA(-Xms,Xmx,Xmn-XX:newSize,-XX:MaxnewSize,-XX:PermSize,-XX:MaxPermSize)区别
1.-Xms:表示java虚拟机堆区内存初始内存分配的大小,通常为操作系统可用内存的1/64大小即可,但仍需按照实际情况进行分配.2.-Xmx:表示java虚拟机堆区内存可被分配的最大上限,通常为操作 ...
- 点击链接跳转到QQ的情况; qq交谈
https://blog.csdn.net/qq_31856835/article/details/70225968 https://blog.csdn.net/qq_37815596/article ...
- MongoDB之$关键字，以及$修饰器$set,$inc,$push,$pull,$pop
一.查询中常见的 等于 大于 小于 大于等于 小于等于 等于:在MongoDB中,什么字段等于什么值就是" : ",比如 "name":"路飞学城&q ...
- React Native 中 static的navigationOptions中的点击事件不能用this
想在某个页面中设置导航栏,title + 左右按钮(按钮上肯定需要有事件) static navigationOptions = ({ navigation, navigationOptions }) ...
- PHP培训教程 php生成WAP页面
WAP(无线通讯协议)是在数字移动电话.个人手持设备(PDA等)及计算机之间进行通讯的开放性全球标准.由于静态的WAP页面在很多方面不能满足用户个性化的服务请求,因此通过WAP服务器端语言产生动态的W ...
- php日志托管给apache处理
php.ini配置: log_errors = On;不显示错误display_startup_errors = Offdisplay_errors = Off ;除了notice级别错误外,报告所有 ...