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 相关文章推荐
js精度溢出解决方案
Dec 02 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
浅谈js闭包理解
Apr 01 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python 获取url中的参数列表实例
2018/12/18 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
金融管理毕业生求职信
2014/03/03 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
重阳节活动总结
2014/08/27 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
前台岗位职责
2015/02/13 职场文书
聘任合同书
2015/09/21 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技