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 相关文章推荐
jquery序列化方法实例分析
Jun 10 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php动态绑定变量的用法
2015/06/16 PHP
超级强大的表单验证
2006/06/26 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python 画图 图例自由定义方式
2020/04/17 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
护理自我鉴定范文
2013/10/06 职场文书
自主招生自荐书
2013/11/29 职场文书
酒鬼酒广告词
2014/03/21 职场文书
大一新生学期自我评价
2014/04/09 职场文书
对祖国的寄语大全
2014/04/11 职场文书
硕士学位论文评语
2014/12/31 职场文书
投资意向协议书
2015/01/29 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Django Paginator分页器的使用示例
2021/06/23 Python