父子间通信四 ($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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- 2018秋寒假作业4——PTA编辑总结1
#include<stdio.h> #include<math.h> int main(void) { int n,i,j,p,m,ge,N,k; char op; ){ sc ...
- NYIST 1108 最低的惩罚
最低的惩罚 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 那么现在问题就来了... 给你N(1=<N<=15)个任务,每个任务有一个截止完成时间t(1= ...
- ASP.NET-缓存outputcache参数
给Index加一个60秒的缓存,应该缓存在IIS服务器里面(我猜的) 只对变化的参数page不进行缓存,其他参数返回相同的内容 根据接受的语言的不同不进行缓存 设定缓存的位置 依赖于数据库变化的缓存 ...
- APP-午饭去哪吃
走到这个快节奏的城市中.部门聚餐.朋友吃饭这些都是日常生活中时有发生的事情,往往吃的东西都是千篇一律,图的也仅仅剩下的是环境了.那么.非常纠结常常去的地方,怎么办呢?来吧.我们随机摇一个吧! wate ...
- 《从零開始学Swift》学习笔记（Day 51）——扩展构造函数
创文章.欢迎转载.转载请注明:关东升的博客 扩展类型的时候,也能够加入新的构造函数.值类型与引用类型扩展有所差别.值类型包含了除类以外的其它类型.主要是枚举类型和结构体类型. 值类型扩展构造函数 扩展 ...
- 使用IIS承载WCF服务
作者:jiankunking 出处:http://blog.csdn.net/jiankunking 1.WCF能够方便的通过IIS承载,此承载模型与ASP.NET和ASP.NET Web Servi ...
- 自己封装js组件 - 中级中高级
接着做关于alert组件的笔记 怎么又出来个中高级呢 对没错 就是出一个中高级来刷流量呵呵呵,但是中高级也不是白叫的 这次主要是增加了widget类,增加了自己绑定的事件和触发事件的方法!这么做是为什 ...
- NOIP2017 小凯的疑惑 解题报告(赛瓦维斯特定理)
题目描述 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付的.现在小 凯想知道在无法准确支付的物品中,最贵的 ...
- storm集群安装配置
1.上传解压 2.进入到storm的conf目录 接上图 启动三台节点的zookeeper集群 启动和查看 Storm 在 nimbus.host 所属的机器上启动 nimbus 服务和 logvi ...
- appium使用教程(三)-------------用例编写
1. 驱动 import os, time, unittest from appium import webdriver PATH = lambda p:os.path.abspath(os.path ...