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 相关文章推荐
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
微信小程序数据存储与取值详解
Jan 30 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
vue视频播放暂停代码
Nov 08 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
解决vue scoped html样式无效的问题
Oct 24 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中static关键字原理的学习研究分析
2011/07/18 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
说明书怎么写
2014/05/06 职场文书
承诺书格式范文
2014/06/03 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
田径运动会通讯稿
2014/09/13 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
安全员岗位职责范本
2015/04/11 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
js 实现验证码输入框示例详解
2022/09/23 Javascript