父子间通信四 ($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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- Git 修改commit message
1.git log --oneline -5 查看最近5次commit的简要信息,输出信息为:简短commitID commit_message,可以根据需要查看最近n次的提交 也可以git log ...
- 解决jquery动态增加元素后children值没有变的问题
html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...
- ACM POJ 1146 ID Codes
题目大意:输入一个字符串.输出它的下一个字典序排列. 字典序算法思想: 1.从右向左寻找字符串找出第一个a[i]<a[i+1]的位置i; 2.从右向左找出第一个大于a[i]的元素a[j]; 3. ...
- Hibernate是怎么工作的——Hibernate的工作流程
举个简单的样例说明: 1.Base.java package cn.flymouse.hibernate; import java.util.Date; import org.hibernate.Qu ...
- 如何解读「量子计算应对大数据挑战：中国科大首次实现量子机器学习算法」？——是KNN算法吗？
作者:知乎用户链接:https://www.zhihu.com/question/29187952/answer/48519630 我居然今天才看到这个问题,天……本专业,有幸听过他们这个实验的组会来 ...
- 转载-让PIP源使用国内镜像，提升下载速度和安装成功率
让PIP源使用国内镜像,提升下载速度和安装成功率. 对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替 ...
- nyoj--1009--So Easy[Ⅰ]（数学）
So Easy[Ⅰ] 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 给出任意一个三角形的三个边a,b,c. 要求:求出这个三角形的外接圆半径. 输入 输入数据有多组. ...
- [Project Euler 409] Nim Extreme 解题报告 (统计方案数)
题目链接:https://projecteuler.net/problem=409 题目: 题解: 题目问你必胜态的数目,我们考虑用总的方案数减去必败态的方案数(NIM游戏没有平局这个操作) 必败态的 ...
- java9新特性-5-Java的REPL工具： jShell命令
1.官方Feature 222: jshell: The Java Shell (Read-Eval-Print Loop) 2.产生背景 像Python 和 Scala 之类的语言早就有交互式编程环 ...
- Asp.Net中使用水晶报表（下）
Asp.Net中使用水晶报表(下) 使用PUSH模式 我们采用下面的几步使用Push模式执行水晶报表: 1. 设计一个DataSet 2. 创建一个.rpt文件同时将其指定给上一步建立的DataS ...