vue1.0父子、兄弟间 通信案例
2024-08-30 20:21:12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件通信</title> <link rel="stylesheet" href="src/dist/styles/iview.css"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="src/dist/vue.min.js"></script> <script src="src/dist/iview.min.js"></script> <style> *{ box-sizing:border-box; } .header,.footer{ width:1200px; height:60px; border:1px solid #ccc; text-align:center; line-height:60px; margin:0 auto; } .footer{ position:absolute; left:50%; margin-left:-600px; bottom:0; } .main{ width:1200px; margin:0 auto; min-height:400px; border:1px solid #ccc; margin-top:20px; padding:20px; } </style> </head> <body> <div id="page"> <cc-header :ppt01="ppt01"></cc-header> <div class="main"> <h2><i-button @click="sendHeader">父向子(header)传数据</i-button></h2> <ul> <li v-for="item in list">{{item}}</li> <li>{{ppt02 || '---'}}</li> </ul> </div> <cc-footer @change02="aceptFooter"></cc-footer> </div> <script> var hub = new Vue(); Vue.component('ccHeader',{ template:'<div class="header">\ 我是header---------{{ppt01 || "==="}}\ <i-button @click="sendFooter">发送给footer</i-button>\ </div>', data:function(){ return { hh:'' } }, props:['ppt01'], methods:{ sendFooter:function(){ alert('ccc') hub.$emit('change01',this.ppt01) } } }) Vue.component('ccFooter',{ template:'<div class="footer">\ 我是fooer----------{{ff || "==="}}\ <i-button @click="sendFather">发送给父亲</i-button>\ </div>', data:function(){ return{ ff:'abcd' } }, methods:{ sendFather:function(){ this.$emit('change02',this.ff) } }, created:function(){ var self = this; hub.$on('change01',function(val){ self.ff = val; }) } }) var vm = new Vue({ el:'#page', data:{ list:['1','2','3'], ppt01:'', ppt02:'' }, methods:{ sendHeader:function(){ this.ppt01 = '呵呵'; }, aceptFooter:function(val){ alert(val+'来自footer'); this.ppt02 = val; } } }) </script> </body> </html>
最新文章
- 转:python中对list去重的多种方法
- UOJ 做题记录
- 简单的python服务器程序
- 强(strong)、软(soft)、弱(weak)、虚(phantom)引用
- shell脚本调试之工具——bashdb
- 【Java】从域名得到ip
- linux 下终端复用软件推荐——tmux
- write &; read a MapFile(基于全新2.2.0API)
- Java开发手册
- JS函数作用域及作用域链理解
- 辛星和你解读PHP递归
- ModelBinder——ASP.NET MVC Model绑定的核心
- ios下iphone的plus下
- 利用CSS3 animation绘制动态卡通人物,无需使用JS代码
- HTML基础下
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- selenium的一些使用方法
- python3 安装 google-visualization-python(windows10)
- JDK8 的FullGC 之 metaspace
- SQL Server中获取指定时间段内的所有月份
热门文章
- hdu2838Cow Sorting(树状数组+逆序数)
- Oracle GoldenGate
- 字符串转换整数 (atoi) C++实现 java实现 leetcode系列(八)
- JQuery中的find、filter和each方法学习
- 有关马氏距离和hinge loss的学习记录
- LeetCode hard 668. Kth Smallest Number in Multiplication Table(二分答案,一次过了,好开心,哈哈哈哈)
- IOS设备获取崩溃日志的办法
- Ubantu 14.04下安装高版本cmake
- webkit Safari的样式库
- VC++ 借助 Win32 API 绘图实现基本的细胞自动机演示