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 给子组件传递数据,子组件则是通过调用父组件 ...
随机推荐
- html iframe高度自适应
想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度 这种方法有两种写法 & ...
- SAP 用户参数 ME_USE_GRID
SAP 用户参数 ME_USE_GRID SAP的一些标准报表格式极其不友好,如果不做特殊参数设定,报表使用起来很不方便.我们可以通过设置user parameter的方式,改变一些报表的显示格式,让 ...
- C#获得指定目录床架时间、更新时间和最后访问时间等信息的代码
将做工程过程常用的内容片段备份一次,下面的内容内容是关于C#获得指定目录床架时间.更新时间和最后访问时间等信息的内容,希望能对小伙伴们也有用. using System;using System.IO ...
- Android ContenObserver 监听联系人数据变化
一.知识介绍 1.ContentProvider是内容提供者 ContentResolver是内容解决者(对内容提供的数据进行操作) ContentObserver是内容观察者(观察内容提供者提供的数 ...
- matlab练习程序（神经网络识别mnist手写数据集）
记得上次练习了神经网络分类,不过当时应该有些地方写的还是不对. 这次用神经网络识别mnist手写数据集,主要参考了深度学习工具包的一些代码. mnist数据集训练数据一共有28*28*60000个像素 ...
- 【Linux】SSH证书免密码远程登陆Linux(Putty)
1.前言 新购置一台便宜服务器做数据库服务器,减轻Web服务器的压力. 为了安全性,root密码设置的非常复杂(随机生成),厌倦了拷贝密码登陆的历史. Putty基本用法都不会的请先花10分钟自行学习 ...
- SQL Server 数据库部分常用语句小结（二）
9. 查询备份还原数据库的进度. select command ,percent_complete ,est_time_to_go=convert(varchar,(estimated_complet ...
- ssh服务突然连接不了案例总结
ssh服务突然连接不了案例总结 一台Oracle数据库服务器(Linux版本为Oracle Linux Server release 5.7)今天中午突然出现短暂的ssh连接不上的情况,ssh连接 ...
- java中split特殊符号
关于点的问题是用string.split("[.]") 解决. 关于竖线的问题用 string.split("\\|")解决. 关于星号的问题用 string. ...
- SQLServer之FOREIGN KEY约束
FOREIGN KEY约束添加规则 1.外键约束并不仅仅可以与另一表的主键约束相链接,它还可以定义为引用另一个表中 UNIQUE 约束的列. 2.如果在 FOREIGN KEY 约束的列中输入非 NU ...