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 相关文章推荐
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
详解vue组件基础
May 04 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
js中Map和Set的用法及区别实例详解
Feb 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 404错误页面实现代码
2009/06/22 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
微信小程序自定义组件
2017/08/16 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
django实现用户登陆功能详解
2017/12/11 Python
Python 移动光标位置的方法
2019/01/20 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
简单了解django缓存方式及配置
2019/07/19 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
python离线安装外部依赖包的实现
2020/02/13 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
高三霸气励志标语
2014/06/24 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers