父子间通信四 ($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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- 紫书 例题8-13 UVa 11093 (反证法)
这道题发现一个性质就解决了 如果以i为起点, 然后一直加油耗油, 到p这个地方要去p+1的时候没油了, 那么i, i+1, --一直到p, 如果以这些点 为起点, 肯定也走不完. 为什么呢? 用反证法 ...
- 【转载】Failed to load class "org.slf4j.impl.StaticLoggerBinder".问题解决
在进行hibernate配置好后运行测试类的时候出现: SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder" ...
- ASP.NET-让html代码输出为字符串
HttpUtility.HtmlEncode这个函数可以让s变成没有攻击的代码,可以提升网站的安全性 public string Index(string s = "suepr name i ...
- [JAVA · 0基础]:3.转义字符
定义 全部的ASCII码都能够用"\"加数字(通常是8进制数字)来表示.而C中定义了一些字母前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\ ...
- HDU 1022 Train Problem I 模拟栈题解
火车进站,模拟一个栈的操作,额外的栈操作,查看能否依照规定顺序出栈. 数据量非常少,故此题目非常easyAC. 直接使用数组模拟就好. #include <stdio.h> const i ...
- PHP第九课 正則表達式在PHP中的使用
今天内容 1.正則表達式 2.数学函数 3.日期函数 4.错误处理 正則表達式: 1.模式修正符 2.五个经常使用函数 另外一个正則表達式的站点:http://www.jb51.net/tools/z ...
- Linux下PHP开启Oracle支持(oci8)
使用php的常见问题是:编译php时忘记加入某扩展,后来想加入扩展,可是由于安装php后又装了一些东西如PEAR等,不想删除文件夹重装,那么此时就须要自己又一次添加某模块支持了,Linux操作系统下能 ...
- hdu_2871
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...
- bzoj1005: [HNOI2008]明明的烦恼(prufer+高精度)
1005: [HNOI2008]明明的烦恼 题目:传送门 题解: 毒瘤题啊天~ 其实思考的过程还是比较简单的... 首先当然还是要了解好prufer序列的基本性质啦 那么和1211大体一致,主要还是利 ...
- 疯狂java讲义之数据类型与运算符
Java是一门强类型语言 所有变量必须先声明.后使用 指定类型的变量只能接受类型匹配的值 注释 @author 作者 @version 版本 @param 方法参数 @return 返回值 标识符与关 ...