Vue.js中兄弟组件之间互相传值实例


Posted in Javascript onJune 01, 2017

兄弟组件之间互相传值,需要建立一个“中转站”(新的vue实例),并且需要主动触发。

实例上的$on方法来接受监听。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>组件传值</title>
 <script src="vue.js"></script>
</head>
<body>
 <div id="box">
 <child1></child1>
 <child2></child2>
 </div>

 <template id="c1">
 <h1>~~~~~~我是哥哥~~~~{{msg}} <button @click='fn'>点击</button></h1>
 </template>
 <template id="c2">
 <h3>~~~~~~我是弟弟~~~~{{msg2}}</h3>
 </template>
</body>
</html>
<script>
 var Hub=new Vue();  // 1) 中转站,其中不需要设置任何参数

 var vm=new Vue({
 el: '#box',
 components:{
  child1:{
  template:'#c1',
  data:function(){
   return {
   msg: 'hello'
   }
  },
  methods:{
   fn:function(){
   // 2) 主动触发监听(中转站触发监听)
   console.log(this.msg); //hello
   Hub.$emit('change',this.msg) //$emit触发监听方法
   }
  }
  },
  child2:{
  template:'#c2',
  data:function(){
   return {
   msg2: 'world'
   }
  },
  // 创建完成  new Vue  create mount
  // 钩子函数
  created(){
   // 3) 接收监听  $on('事件名称',function(val){}) val是传递过来的值
   Hub.$on('change',function(val){
   console.log(val) //hello
   // this.msg2 = val;
   })
  }
  }
  
 }
 })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的3d效果实现代码
Mar 23 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
Vue.Draggable实现拖拽效果
Jul 29 #Javascript
JS请求servlet功能示例
Jun 01 #Javascript
vue.js加载新的内容(实例代码)
Jun 01 #Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 #Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 #Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 #Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 #Javascript
You might like
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
js转义字符介绍
2013/11/05 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
公司JAVA开发面试题
2015/04/02 面试题
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
淘宝客服工作职责
2014/07/11 职场文书
redis实现排行榜功能
2021/05/24 Redis
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
Python常遇到的错误和异常
2021/11/02 Python