vue php聊天室,实例详解vue组件父子间通信之聊天室
本文主要为大家详细介绍了vue组件父子间通信之综合练习聊天室制作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
组件父子间通信之综合练习
{{msg}}
// 创建父组件
Vue.component("chat-room",{
//data属性中的chatList保存用户聊天信息
data:function(){
return{
chatList:[]
}
},
template:`
//假的聊天室
假的聊天室
//显示用户的聊天信息
- {{tmp}}
`
})
//创建子组件
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:`
{{userName}}
发送
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
组件间通信综合练习：
(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接收到数据显示在列表中
代码：
Vue.component('chat-room',{
methods:{
recvMsg:function(msg){
console.log("在父组件中接收子组件传来的数据"+msg);
this.chatList.push(msg);
}
},
data: function () {
return {
chatList:[]
}
},
template:`
假的聊天室
{{tmp}}
`
})
Vue.component('user-component',{
props:['userName'],
data: function () {
return {
userInput:''
}
},
methods:{
sendToFather: function () {
//触发toFatherEvent的事件，把input中
//用户输入的数据发送
this.$emit("sendToFather",this.userName+":"+this.userInput);
}
},
template:`
{{userName}}
发送
`
})
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
})
相关推荐：
vue php聊天室,实例详解vue组件父子间通信之聊天室相关推荐
- dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
组件 选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}} javaScript代码 export default { name: "cam ...
- vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传
详解Vue.js调用手机相机和相册以及上传 发布于 2020-7-7| 复制链接 摘记: 组件 ```xhtml .. 组件 ```xhtml --> 选中{{imgList.length}}张 ...
- vue webpack 访问php,实例详解vue-cli优化的webpack配置
最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果.本文主要介绍了详解基于vue-cli优化的webpack配置,小编觉得挺不错的,现 ...
- vue 变量定义 对象_详解Vue 全局变量，局部变量
局组件和局部组件 1.先定义组件 Vue.component('组件名', { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小 ...
- vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
- oclick vue 传参 函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货 作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
- vue样式 引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 Jav ...
最新文章
- RNAseq-GO、biomaRt转换ID
- 让人“蛋碎”的ie兼容问题
- 用Visual C#开发简单的复合控件
- java读取excel数据保存到数据库中_java读取excel的内容（可保存到数据库中）
- Qt Creator指定代码样式设置
- 两篇同年硕士论文高度雷同！电子科技大学回应：启动调查！
- seafile 部署_Seafile开启webdav及读写性能测试
- 腾讯Q3财报看点：净利近10年来首次下滑 为硬科技持续“烧钱”
- phpyii框架倒叙_YII框架常用技巧总结
- 原生JavaScript + Canvas实现图片局部放大器
- 大数据技术栈思维导图
- maya2014中uvlayout2.08安装
- CMD下将ts视频合并和存储为MP4文件
- 并发编程----接口聚合 （实现方法）
- linux下无线网卡安装debian,Debian下安装无线网卡的驱动
- 解决ios13 cydia更新出现http/1.1 404 not found
- 将excel文件内容转为json格式字符串
- 选择physx处理器 gpu 计算 matlab 计算_边缘计算服务器，迎接边缘计算
- 软件工程实验一：详细设计及编码
- 通过Visual Studio诊断工具定位软件CPU瓶颈