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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
express框架下使用session的方法
Jul 31 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
网络资源
2006/10/09 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
smarty简单入门实例
2014/11/28 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python中datetime模块参考手册
2017/01/13 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
基于FME使用Python过程图解
2020/05/13 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2015年维修工作总结
2015/04/25 职场文书
公司新员工欢迎词
2015/09/30 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python