父子间通信四 ($dispatch 和 $broadcast用法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js测试父子之间通信</title> <script type="text/javascript" src="lib/boot.js"></script> <style> .box{ width:100%; max-width:640px; margin:40px auto; border:1px solid #ccc; padding:20px; } </style> </head> <body> <div id="app" v-cloak> <!-- 定义 --> <child :msg-data="msg"></child> </div> <script> var tx = function(){ // 父组件 var child = { template:` <div class="box" name="cs-slot">slot用法</div> <div class="box"> <i-button @click="send()">获取数据</i-button> <i-button @click="cancel" type="primary">取消数据</i-button> <div> <ul> <li v-for="item in msgData">名称:{{item.name}}---id:{{item.id}}</li> </ul> </div> </div> `, data:function(){ return { msgData:[] } }, events:{ getv:function(val){ this.msgData = val; }, clearV:function(val){ this.msgData = []; } }, methods:{ send:function(){ this.$dispatch('getList','hellow kitty');//调用events父类方法 }, cancel:function(){ this.$dispatch('clearList','hellow kitty');//调用events父类方法 } } } return new Vue({ el:'#app', data:{ msg:[] }, events:{ getList:function(val){ this.msg = [{name:'百度',id:'001'},{name:'百威',id:'002'},{name:'腾讯',id:'003'}]; this.$broadcast('getv',this.msg);//调用events子类方法 }, clearList:function(){ this.$broadcast('clearV','');//调用events子类方法 } }, components:{ child:child } }) }() </script> </body> </html>
父子间通信四 ($dispatch 和 $broadcast用法)的更多相关文章
- vue组件父子间通信之综合练习--假的聊天室
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue父子间通信案列三($emit和prop用法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件父子间通信02
三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...
- vue父子间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- react 组件间通信,父子间通信
一.父组件传值给子组件 父组件向下传值是使用了props属性,在父组件定义的子组件上定义传给子组件的名字和值,然后在子组件通过this.props.xxx调用就可以了. 二.子组件传值给父组件 子组件 ...
- Vue组件父子间通信01
子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- 父子间的通信,以及ref
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- react系列(三)组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- P1064 金明的预算方案 (依赖性背包问题)
这道题可以用分组背包来做. 但是分组有两种方式 一种是把主件,主件+附件1,主件+附件2分成一组 组内只能选一个物品 一种是建一颗树,用树形dp的方式去做 第二种更通用,就算物品的依赖关系是森林都可以 ...
- SpringBoot实战(一)HelloWorld
一:环境准备: JDK:1.8版本 Maven:3.5版本(如果觉得下载速度慢,可以切换为阿里镜向地址) Intellij:2018.2.1版本 二:实际操作: 1.在Intellij中创建一个新的S ...
- Unity 制作安装程序和卸载程序
1.最简单的方式通过winrar制作 但是做出来的页面好low的感觉 参考链接:https://www.cnblogs.com/fetty/p/5185913.html 2.通过inno制作安装程序: ...
- C语言修改文件某部分内容
两种方法 1.全部读入内存 修改后重新存入文件 2.边读边写到另一新建文件 要修改的部分修改后存入新建文件 其他部分原封不动写入 写完删掉原先文件 将这个新的改为删掉那个的名字 方法一 读入内存修改 ...
- Android实战简易教程-第二十八枪(Uri转String型实例)
接上一篇文章.我们能够轻易的获取所选图片的uri,那么我们考虑怎样将获取的uri转换成String型的地址呢? 接下来我们通过实例来研究.布局文件和上篇(二十七枪)一致,我们就不再列出,直接看Main ...
- php通过shell调用Hadoop的方法
1.php代码(index.php) <!DOCTYPE html> <html> <!-- <style> body{background-color:re ...
- MapReduce中combine、partition、shuffle的作用是什么
http://www.aboutyun.com/thread-8927-1-1.html Mapreduce在hadoop中是一个比較难以的概念.以下须要用心看,然后自己就能总结出来了. 概括: co ...
- nyoj--46--最少乘法次数(数学+技巧)
最少乘法次数 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 给你一个非零整数,让你求这个数的n次方,每次相乘的结果可以在后面使用,求至少需要多少次乘.如24:2*2=2 ...
- linux下修改完profile文件的环境变量后如何立即生效
方法1: 让/etc/profile文件修改后立即生效 ,可以使用如下命令: # . /etc/profile 注意: . 和 /etc/profile 有空格 方法2: 让/etc/profile文 ...
- BZOJ 1069 求凸包+旋转卡壳
思路: 求凸包: 先按照x轴排个序 从左往右扫一遍 找到上凸壳 (用叉积) 再从右往左扫一遍 求下凸壳 搞个旋转卡壳就好啦~ 嗯 我手懒 用的C++ Complex库 巨好用! //By Sirius ...