vue中的非父子间的通讯问题简单的实例代码


Posted in Javascript onJuly 19, 2017

官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>兄弟之间的通讯问题</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
<one></one>
<two></two>
</div>
<script>
  //创建中央事件总线。
    var bus =new Vue();
//  组件one
  Vue.component('one',{
    template:'<button v-on:click="oneFn">点击+</button>',
    data:function () {
      return{
        oneNum:0
      }
    },
//    为组件one创建方法,用来触发事件common(common是中央事件总线bus的自定义事件名称,只需要与two中的监听事件名称一致即可。
    methods:{
      oneFn:function () {   
        bus.$emit("common", this.oneNum+=1)//此处的参数即为two中监听事件中传入的参数(n),此处(触发)的this指的是组件one,而在(监听)的this指的是bus。
      }
    }
  });
//  组件 two
  Vue.component('two',{
    template:'<p>{{twoNum}}</p>',
    data:function () {
     return {
       twoNum:0
     }
    },
//    为组件two创建钩子,挂载$on监听事件,
    created:function () {
      var self = this;//将this赋值给self。
      bus.$on('common',function (n) {
        self.twoNum = n;//此处为self,表示是组件two的变量,若为this,则表示是bus的变量。
      })
    }
  });
new Vue({
  el:'#app'
})
</script>
</body>
</html>

我也是新手,刚开始自学Vue,上面有不懂的童鞋请留言,一起进步!

以上所述是小编给大家介绍的vue中的非父子间的通讯问题简单的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript顺序加载图片的方法
Jul 18 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
Vue之Watcher源码解析(2)
Jul 19 #Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 #Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 #Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 #Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 #Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
You might like
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
php格式化电话号码的方法
2015/04/24 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
js获取form的方法
2015/05/06 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
JS常见构造模式实例对比分析
2018/08/27 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
如何通过python实现人脸识别验证
2020/01/17 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
九年级数学教学反思
2014/02/02 职场文书
企业指导教师评语
2014/04/28 职场文书
大学生学习计划书
2014/09/15 职场文书
师德师风整改措施
2014/10/24 职场文书
教师岗位职责
2015/02/03 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书