vue非父子组件之间的通信
https://www.cnblogs.com/chengduxiaoc/p/7099552.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<com-a></com-a>
<com-b></com-b>
</div>
<script>
//vm.$emit( event, arg ) //触发当前实例上的事件
//vm.$on( event, fn );//监听event事件后运行 fn；
var Event=new Vue(); //声明一个独立的空Vue公用实例，用来触发通讯的事件。
var a={
template:'<div><span>我是a组件，我的数据内容是{{msga}}</span><br><input type="button" value="我要发送数据" @click="send"></div>',
data(){
return{
msga:'我是a数据，我要发送给兄弟组件'
}
},
methods:{
send(){
Event.$emit('a-msga',this.msga);//触发前面Event公用示例的方法，那么别的地方就可以想办法监听接收这个事件。参数（事件名，传入的值）
}
}
}
var b={
template:'<div><h3>这是B组件</h3><span>我是从a组件里面接收的数据：{{a}}</span></div>',
data(){
return {
a:''
}
},
mounted(){ //这里mounted表示当组件和页面挂载完成的时候，需要执行的函数。
var _this=this;//因为在Event.on内部的this是指向Event实例的，所以这里，先使用_this将this存起来，后面就可以使用了。
Event.$on('a-msga',function(a){
alert('触发了接收');
_this.a=a;
})
}
}
new Vue({
el:'#app',
components:{
'com-a':a,
'com-b':b
}
})
</script>
</body>
</html>
实例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<child content='lgy'></child>
<child content='ssj大傻子'></child>
</div>
<script>
Vue.prototype.bus=new Vue();
Vue.component('child',{
data:function(){
return {
childContent:this.content
}
},
props:{
content:String
},
template:'<h1 @click="handleClick">{{childContent}}</h1>',
methods:{
handleClick:function(){
// alert(this.childContent)
this.bus.$emit('change',this.content);
}
},
mounted:function(){
var _this=this;
this.bus.$on('change',function(msg){
_this.childContent=msg
})
}
});
var vm=new Vue({
el:'#root',
})
</script>
</body>
</html>
vue非父子组件之间的通信的更多相关文章
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
随机推荐
- IaaS，PaaS，SaaS 的区别
原文:http://www.ruanyifeng.com/blog/2017/07/iaas-paas-saas.html 越来越多的软件,开始采用云服务. 云服务只是一个统称,可以分成三大类. Ia ...
- C# string数组转int数组（转载）
C# string数组转int数组 用法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //字符串数组(源数组) string[] sNums = new[] {"1 ...
- [PHP] 控制反转依赖注入的日常使用
控制反转:控制权交给了自己的类 依赖注入:依赖另一个类,我没有手动去new它 <?php /*我自己要用的类*/ class User { private $name; private $age ...
- Oracle day01 select where关键字
select关键字 作用:检索“列” 注意:1.select后面的列可以起别名(查询的显示结果) 1) 列名后面一个空格后添加别名(别名中不许有“空格”) 2) 列名后面一个空格后使用双引号添加别名 ...
- Android Studio 关于沉浸式状态栏
values-v19/style.xml <style name="AppTheme" parent="Theme.AppCompat.Light.NoAction ...
- json 按照字段分类
let arr = [ { Category:'A', Amount:, },{ Category:'B', Amount:, },{ Category:'A', Amount:, },{ Categ ...
- 用WijmoJS搭建您的前端Web应用 —— React
前文回顾 在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法. 而今天,我们将展示如何使用 WijmoJS 来搭建一款具备独特创新性.出色性能和简单代码逻辑的 Reac ...
- MongoDB分片 在部署和维护管理 中常见事项的总结
分片(sharding)是MongoDB将大型集合分割到不同服务器(或者说集群)上所采用的方法,主要为应对高吞吐量与大数据量的应用场景提供了方法. 和既有的分库分表.分区方案相比,MongoDB的最大 ...
- 从0开始的Python学习007函数&函数柯里化
简介 函数是可以重用的程序段.首先这段代码有一个名字,然后你可以在你的程序的任何地方使用这个名称来调用这个程序段.这个就是函数调用,在之前的学习中我们已经使用了很多的内置函数像type().range ...
- c/c++ 网络编程 UDP 用if_nameindex和ioctl取得主机网络信息
网络编程 UDP 用if_nameindex和ioctl取得主机网络信息 getifaddrs函数取得的东西太多了,如果只想取得网卡名字和网卡编号可以用下面的2个函数. 1,if_nameindex ...