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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 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 MSSQL 存储过程的方法
2008/12/24 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
10款实用的PHP开源工具
2015/10/23 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
Python生成随机密码
2015/03/10 Python
python实现批量监控网站
2016/09/09 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
实时获取Python的print输出流方法
2019/01/07 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
学校七一活动方案
2014/01/19 职场文书
活动倡议书范文
2014/05/13 职场文书
药品营销策划方案
2014/06/15 职场文书
公共场所禁烟标语
2014/06/25 职场文书
2014年设计师工作总结
2014/11/25 职场文书
五年级下册复习计划
2015/01/19 职场文书
对公司的意见和建议
2015/06/04 职场文书
考试后的感想
2015/08/07 职场文书
阿里云日志过滤器配置日志服务
2022/04/09 Servers