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 ...
随机推荐
- pandas 常规操作大全
那年夏天抓住了蝉的尾巴 gitbook 前言 pandas 抓住 Series (排序的字典), DataFrame (row + 多个 Series) 对象 , 就如同 numpy 里抓住 ndar ...
- Servlet实现Cookie自动登录，并显示保存的用户信息
转自:https://blog.csdn.net/qq_29612963/article/details/51100565
- Kali Linux安装及中文指南
Kali Linux安装及中文指南 Kali Linux安装教程:https://blog.csdn.net/u012318074/article/details/71601382 Kali Linu ...
- 解决springmvc 乱码的方法
post乱码: 在web.xml添加post乱码filter: <filter> <filter-name>CharacterEncodingFilter</filter ...
- 02java基础——类和方法
1.类的定义 /* 定义类: 使用类的形式,对现实中的事物进行描述 事物: 属性,方法 属性: 变量 方法: 这个事物具备的功能 格式: public class 类名{ 属性定义 修饰符 数据类型 ...
- GUI学习之二十七——布局管理学习总结
今天讲一个大的内容——布局管理. 一.布局管理的诞生背景 在前面所讲的所有案例中,我们都是用采用手动布局的方式来布局的.结合个案例来说明一下:在一个界面上放三个label,三个label纵向排列 fr ...
- 配置apache运行cgi程序
配置apache运行cgi程序 文章目录 [隐藏] ScriptAlias目录的CGI ScriptAlias目录以外的CGI 配置apache运行cgi程序可分为两种情况,一是ScriptAlias ...
- 快速幂(Fast Pow)
定义 快速求a^b%c的算法 原理 指数可以被二进制分解 那么a^b可以分解为a^2^k1*a^2^k2*…… 又显然a^2^(k+1)=a^(2^k*2)=(a^2^k)^2 所以可以将指数在二进制 ...
- 【leetcode】1177. Can Make Palindrome from Substring
题目如下: Given a string s, we make queries on substrings of s. For each query queries[i] = [left, right ...
- JavaScript正则表达式简介（一）
一.正则表达式 正则表达式Regular Expression,可以简写为regexp.regex或是RE. 正则表达式使用单个字符串来描述或是匹配一系列符合某个句法规则的字符串模型. 按照某种规则去 ...