vue.js单文件组件中非父子组件的传值实例


Posted in Javascript onSeptember 13, 2018

最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助!

在官网api中的这段讲解很少,也很模糊;官网中说明如下:

非父子组件通信:

有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:

var bus = new Vue();
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

那么这一段在单文件组件开发模式中具体怎么用呢?

首先在main.js中加入data,如下:

new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App },
 data:{
 bus:new Vue()
 }
})

如何获取到这个空的vue对象 bus呢.在组件里面直接调用这个this.$root

<template>
 <div class="title" @click="change(msg)">{{ msg }}</div>
</template>
<script>
 export default {
 name: 'first',
 data() {
  return {
  msg: '我是首页'
  }
 },
 methods: {
  change(text) {
  this.$root.bus.$emit("hehe", text)
  }
 }
 }

</script>

然后在另一个组件内调用on事件接收,当然在组件销毁时解除绑定,使用on事件接收,当然在组件销毁时解除绑定,使用off方法

<template>
 <h1>{{ msg }}</h1>
</template>
<script>
 export default {
 name: 'second',
 data() {
  return {
  msg: '我是第二页'
  }
 },
 created() {
  let that = this;
  this.$root.bus.$on("hehe", function (t) {
  that.msg = that.msg + t
  })
 }
 }

</script>

然后点击的时候就能传递值了,还等什么,快来试试吧!

以上这篇vue.js单文件组件中非父子组件的传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jquery常用操作小结
Jul 21 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
JS解析XML实例分析
Jan 30 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
vue实现节点增删改功能
Sep 26 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
JavaScript数组方法的错误使用例子
Sep 13 #Javascript
vue仿element实现分页器效果
Sep 13 #Javascript
区别JavaScript函数声明与变量声明
Sep 12 #Javascript
详解js中Array的方法及技巧
Sep 12 #Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 #Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 #Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 #Javascript
You might like
php实现单链表的实例代码
2013/03/22 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
Python中asyncore的用法实例
2014/09/29 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python 下载及安装详细步骤
2019/11/04 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
opencv python图像梯度实例详解
2020/02/04 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
优秀毕业生自荐信范文
2014/01/01 职场文书
商务日语专业自荐信
2014/04/17 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
客房领班岗位职责
2015/02/11 职场文书
工会工作个人总结
2015/03/03 职场文书
职称评定个人总结
2015/03/05 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL