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 给子组件传递数据,子组件则是通过调用父组件 ...
随机推荐
- Hibernate框架笔记01_环境搭建_API_CRUD
目录 1. Hibernate框架的概述 1.1 什么是框架 1.2 经典三层架构 1.3 Hibernate框架 2 Hibernate入门 2.1 下载Hibernate的开发包 2.2 创建项目 ...
- 手机端input[type=date]的placeholder不起作用
<div class="input clearfix"> <label class="fl">起始日期</label> &l ...
- bootstrap思考一
bootstrap是一种热门的Web前端流行框架,如果要兼容PC端.手机端和响应式布局,那他一定是我的首选.bootstrap内容很多,功能强大,其中最好入门也是很重要的就是他的栅格系统.他有四个典型 ...
- 无依赖简单易用的Dynamics 365实体记录数计数器并能计算出FetchXml返回的记录数
本人微信公众号:微软动态CRM专家罗勇 ,回复278或者20180812可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 我们 ...
- 广州.NET微软技术俱乐部 - 新秀计划
本文正在写草稿中, 发布时会在群里单独通知
- 关于Windows系统不会变慢的设想
记录软件安装的过程,比如创建了哪些服务,哪些计划任务以及启动项等等. 然后软件安装完成后把关于软件的进程,服务,计划任务等都删掉. 然后手动创建一个脚本,用脚本代替软件的启动.比如,如果要启动sqls ...
- Android学习笔记之SoftReference软引用,弱引用WeakReference
SoftReference可以用于bitmap缓存 WeakReference 可以用于handler 非静态内部类和匿名内部类容易造成内存泄漏 private Handler mRemoteHand ...
- 算法：数组中和为s的两个数字
@问题 :题目描述输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述:对应每个测试案例,输出两个数,小的先输出.@思路: 两个 ...
- PostgreSql 查询表结构和说明
select (select relname from pg_class where oid=a.attrelid) relname , () as comment from pg_class whe ...
- LeetCode算法题-Longest Harmonious Subsequence（Java实现）
这是悦乐书的第270次更新,第284篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第136题(顺位题号是594).我们定义一个和谐数组是一个数组,其最大值和最小值之间的差 ...