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 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
js转换对象为xml
Feb 17 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
vue.js路由跳转详解
Aug 28 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
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(7) php 字符串相关应用
2010/03/05 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
公益活动策划方案
2014/01/09 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
结婚邀请函范文
2014/01/14 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
语文教学随笔感言
2014/02/18 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript