父子间通信四 ($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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- 2015 Multi-University Training Contest 1 Tricks Device
Tricks Device Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- 009实现一个算法来删除单链表中的一个结点，仅仅给出指向那个结点的指针(keep it up)
呵呵,这个题不能直接删除已知的结点.由于是单链表,不知道前驱,仅仅知道 后继结点,直接删除会使链表断开.只是我们能够删除已知结点的后继结点, 把后继结点的值赋值给已知结点. #include < ...
- [MST] Describe Your Application Domain Using mobx-state-tree(MST) Models
In this lesson, we introduce the running example of this course, a wishlist app. We will take a look ...
- hdoj 1429 胜利大逃亡(续) 【BFS+状态压缩】
题目:pid=1429">hdoj 1429 胜利大逃亡(续) 同样题目: 题意:中文的,自己看 分析:题目是求最少的逃亡时间.确定用BFS 这个题目的难点在于有几个锁对于几把钥匙.唯 ...
- 用jquery给select加选中事件
select在前端开发过程中很常用,现在我们要实现一个效果,那就是选中select中的某一项,执行事件,本来自己没怎么接触过这些,最后网上找了一些资料,自己研究了一下,把方法分享给大家,大家如果有需要 ...
- OpenGL编程逐步深入（七）旋转变换
准备知识 这一节我们来看一下旋转变换.旋转变换指的是给我们一个指点的点和角度,我们需要绕着过该点的轴线將对象旋转对应的角度.这里我们只改变X/Y/Z中的两个分量,第三个分量保持不变.这意味着我们的图形 ...
- JSONObject与JSONArray的使用区别
1.JSON 1. 创建一个JSONObject对象: package com.yunos.tv.video.resource.controller.web; import java.util.Arr ...
- IHttpHandler的学习（0-2）
这个IHttpHandler,要想到asp.net生命周期 ,想到哪个从你发起请求开始,这个请求通过HttpModule------>IHttpHandler的: 执行HttpModule的一系 ...
- java高效判断素数
java高效判断素数 package solution; public class Prime { // 偶数可以由有两个素数相加得到, 一个偶数可能有多个这样的两个素数, 请寻找到 这样两个素数,让 ...
- [NOIP2009提高组]靶形数独
题目:洛谷P1074.Vijos P1755.codevs1174. 题目大意:给你一个数独,让你填完这个数独,并要求得分最大,问这个得分是多少(不能填完输出-1). 每个格子的得分是当前格子所填的数 ...