vue中非父子组件的传值bus的使用
非父子之间的组件传值，可以使用vuex。简单的状态管理，也可以用vue bus
vue bus可以实现不同组件间、不同页面间的通信，比如我在A页面出发点击事件，要B页面发生变化，使用方法如下：
全局定义：main.js
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子组件传值（bus/总线/发布订阅模式/观察者模式）</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<child content="Dell"></child>
<child content="Lee"></child>
</div>
<script>
Vue.prototype.bus = new Vue(); Vue.component('child',{
data:function(){
return {
selfContent:this.content
}
},
props:{
content:String
},
template:'<div @click="handleClick">{{selfContent}}</div>',
methods:{
handleClick:function(){
//由于bus是vue的一个实例，所以它有$emit这个方法,change就是一个随意的名字，可以改成aaa
this.bus.$emit('change',this.selfContent)
}
},
mounted:function(){
var this_= this;
this.bus.$on("change",function(msg){
this_.selfContent=msg;
})
}
})
var vm= new Vue({
el:'#app',
data:{},
methods:{
}, })
</script>
</body>
</html>
当然也可以参考一些其他人的博客，注意理解
https://www.jianshu.com/p/5b383e66c117
http://www.cnblogs.com/fanlinqiang/p/7756566.html
vue中非父子组件的传值bus的使用的更多相关文章
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- Vue.js父子组件如何传值 通俗易懂
父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...
- Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于Vue中父子组件相互传值
Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- Vue父子，子父，非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
随机推荐
- Mask_RCNN
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_04-freemarker基础-基础语法种类
注释 编译一些这个模板 我的IDEA里面,是重新编译 刷新页面 注释.插值.FTL.文本
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_14-异常处理-异常处理的问题分析
这块代码没有异常处理.如果在Service出现了异常代码,在哪里捕获?要么在Servive内捕获,要么在调用service的地方也就是controller内捕获 每个调用service的地方都要去捕获 ...
- 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_01-项目概述-功能构架-项目背景
这个就是博学谷下的 在线教育平台
- Python 标准库之 fcntl
在 linux 环境下用 Python 进行项目开发过程中经常会遇到多个进程对同一个文件进行读写问题,而此时就要对文件进行加锁控制,在 Python 的 linux 版本下有个 fcntl 模块可以方 ...
- Caché，Cache数据库下载
Caché数据库主要用于医疗领域,国内的开发人员比较少接触,使用环境相对封闭,前段时间刚才用到,下载也费了许多时间,特记录一下,帮助那些需要的人. 顺便说一下,TreeSoft数据库管理系统,目前支持 ...
- SNIPER-MXNet中出现ValueError: could not broadcast input array from shape (XXX,5) into shape (100,5)
这是关于标签数量的问题,搜索"100," ,其中与读标签框有关,或者与标签匹配有关的,全部改到大于“图片中最多有的标签数量”即可.
- OpenCV3编程入门.记录
ZC:OpenCV3编程入门_毛星云编著_电子工业出版.pdf 1.在看到 PDF.P134(计算数组加权和:addWeighted()函数)的时候,其中讲到“当输出数组的深度为CV_32S时,这个函 ...
- HDU6739 Invoker 【dp】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6739 借鉴了这个网址的题解:https://blog.csdn.net/qq_41785863/art ...
- loback的介绍与配置-(通俗易通)
一．logback的配置介绍 Logback的配置分为三个内容:Logger.appender及layout Logger:作为日志的记录器,主要用于存放日志对象,也可以定义日志类型.级别. appe ...