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 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
微信小程序实现留言板
Oct 31 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python @property装饰器原理解析
2020/01/22 Python
python 实现音频叠加的示例
2020/10/29 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
全球性的女装店:storets
2019/06/12 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
公务员个人自我评价分享
2013/11/06 职场文书
家长给孩子的评语
2014/01/30 职场文书
护理不良事件检讨书
2014/02/06 职场文书
优秀经理获奖感言
2014/03/04 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
JS实现简单的九宫格抽奖
2022/06/28 Javascript