vue2.0 兄弟组件数据传递方法
2024-08-31 12:35:51
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="http://unpkg.com/iview/dist/iview.min.js"></script> </head> <body> <div id="page"> <com-header></com-header> <h3>----------------</h3> <com-footer></com-footer> <h2>===============对话列表====================</h2> <ul v-if="dhList && dhList.length"> <template v-for="(item,index) in dhList"> <li><a @click="remove(index)">X</a> {{item}}</li> </template> </ul> </div> <script type="text/x-template" id="comHeaderTemplate"> <div> <button @click="sendMess()"> {{msg}} </button> <input type=="sendMess()"> </div> </script> <script type="text/x-template" id="comFoooterTemplate"> <div> <button @click="sendMess()" > {{msg}} </button> <input type=="sendMess()"> </div> </script> <script> var pu = new Vue(); var dhList = []; var comHeader = { template:'#comHeaderTemplate', data:function(){ return { msg:'header', userMess:'' } }, methods:{ sendMess:function(){ pu.$emit('mess',this.userMess); this.userMess = ''; } }, mounted:function(){ pu.$on('mess2',function(m2){ console.log("footer:"+m2) dhList.push("footer:"+m2); }) } } var comFooter = { template:'#comFoooterTemplate', data:function(){ return { msg:'footer', userMess:'' } }, methods:{ sendMess:function(){ pu.$emit('mess2',this.userMess); this.userMess = ''; } }, mounted:function(){ pu.$on('mess',function(m){ console.log("header:"+m); dhList.push("header:"+m); }) } } new Vue({ el:'#page', data:{ dhList:dhList }, methods:{ remove:function(index){ ); } }, components:{ comHeader:comHeader, comFooter:comFooter } }) </script> </body> </html>
最新文章
- 【.net 深呼吸】自定义特性(Attribute)的实现与检索方法
- 使用Mysql Workbench 画E-R图
- react-router+webpack+gulp路由实例
- No assembly found containing an OwinStartupAttribute
- EF-联合查询-结果集-Group by-统计数目
- Linux chkconfig 命令详解
- 【转载】IIS7.5(经典模式)访问静态资源(.css和.js文件)提示:未能执行 URL
- 【PRML读书笔记-Chapter1-Introduction】引言
- IIS7.5(IIS7)配置伪静态urlrewrite
- 在 Windows Azure 网站中配置动态 IP 地址限制
- Akka 简介与入门
- poj 1654 Area(计算几何--叉积求多边形面积)
- Angular 路由配置
- Security - 轻量级Java身份认证、访问控制安全框架
- koa-router 源码由浅入深的分析(7.4.0版本的)
- Postman 使用方法详解
- Web Worker 初探
- 性能测试六:jmeter进阶之Cookie与header管理器
- Android 信号处理面面观 之 信号定义、行为和来源
- sun.misc.BASE64Encoder图片编码,并在页面显示