<!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用法)的更多相关文章

  1. vue组件父子间通信之综合练习--假的聊天室

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue父子间通信案列三($emit和prop用法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue组件父子间通信02

    三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...

  4. vue父子间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  5. react 组件间通信，父子间通信

    一.父组件传值给子组件 父组件向下传值是使用了props属性,在父组件定义的子组件上定义传给子组件的名字和值,然后在子组件通过this.props.xxx调用就可以了. 二.子组件传值给父组件 子组件 ...

  6. Vue组件父子间通信01

    子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...

  7. 【Vue】利用父子组件间通信实现一个场景

    组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...

  8. 父子间的通信,以及ref

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. react系列（三）组件间通信

    组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...

随机推荐

  1. python基础7（函数 Ⅱ）

    1.python代码运行遇到函数时 从python解释器开始执行之后,就在内存中开辟了一个空间 每当遇到一个变量的时候,就把变量名和值之间的对应关系记录下来. 但是当遇到函数定义的时候解释器只是象征性 ...

  2. 洛谷 P1088 火星人 （全排列）

    直接调用next_permutation即可,向前的话可以调用prev_permutation #include<cstdio> #include<cctype> #inclu ...

  3. HTTP——学习笔记（8）

    HTTP中的一些协议内容会限制某些网站的功能使用 比如,Facebook这类的社交网站,需要实时地观察到海量用户公开发布的内容,而HTTP中的以下标准就会成为瓶颈: 一条连接上只可发送一个请求 请求只 ...

  4. Camera Calibration 相机标定：原理简介（四）

    4 基于3D标定物的标定方法 使用基于3D标定物进行相机标定,是一种传统且常见的相机标定法.3D标定物在不同应用场景下不尽相同,摄影测量学中,使用的3D标定物种类最为繁杂,如图-1的室内控制场,由多条 ...

  5. chrome默认打开隐身模式

    chrome图标右键属性,在“目标”后添加参数“ --incognito”(注意是双短划线,不包括双引号,双短划线前加一空格)就可以直接以隐身模式启动chrome了

  6. LeakCanary：简单粗暴的内存泄漏检測工具

    差点儿每一个程序猿在开发的过程中都会遇到内存泄漏.那么我们怎样检測到app是否哪里出现内存泄漏呢?square公司推出了一款简单粗暴的检測内存泄漏的工具-- LeakCanary 什么是内存泄漏? 内 ...

  7. Android 提示： The connection to adb is down, and a severe error has occured.

    今天早上打开Eclipse,一直提示 The connection to adb is down, and a severe error has occured,无法执行程序.重新启动Eclipse. ...

  8. Tomcat的安装跟配置

    安装Tomcat的步骤:1)安装好JDK2)把tomcat-7.0.30软件解压到本地硬盘3)设置环境变量:JAVA_HOME: C:\Program Files\Java\jdk1.7.0_04To ...

  9. directshow 获取本地摄像头播放

    最近因为项目的需要,做了一个基本的获取本地笔记本摄像头并且播放的例子,因为网上的关于这部分的完整例子基本都没有,那我就上传一个吧,希望能够帮到需要学习视频的朋友. 另外也是为了纪念雷霄骅博士为音视频方 ...

  10. springMVC接受前台传值

    今天,用ajax向springMVC的控制器传参数,是一个json对象.({"test":"test","test1":"test ...