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 给子组件传递数据,子组件则是通过调用父组件 ...
随机推荐
- [android] 创建模拟器遇到的常见错误
1.错误提示: invalid command line sdk安装目录有中文添加ANDROID_SDK_HOME环境变量,指向sdk安装目录2.模拟器无法安装应用模拟器开启其实是开启了的程序占用这个 ...
- Java开发笔记（三十三）字符包装类型
正如整型int有对应的包装整型Integer那样,字符型char也有对应的包装字符型Character.初始化字符包装变量也有三种方式,分别是:直接用等号赋值.调用包装类型的valueOf方法.使用关 ...
- H5页面的高度宽度100%
解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh ...
- javaweb项目创建和虚拟主机配置
首先点击File-àNew-àWeb [roject-à在Projcet Name里写项目名-à点击finish-à会出来一个框,选择NO,一个javaweb项目就创建好了.具体请看下图! 配置服务器 ...
- 【已解决】checkout 配置无效的问题可以进来看下
在日常工作中,我们经常会遇到要更新一个项目,但是由于更改了配置,需要将这些配置commit或者checkout,但是有的同学不想commit怎么办呢,只能通过checkout,那么问题又来了,改了很多 ...
- Windows WMIC命令使用详解(附实例)
第一次执行WMIC命令时,Windows首先要安装WMIC,然后显示出WMIC的命令行提示符.在WMIC命令行提示符上,命令以交互的方式执行 执行“wmic”命令启动WMIC命令行环境.这个命令可以在 ...
- CentOS 6.2 中文
在虚拟机里面安装好centos6.2之后,默认是英文! 对于命令行操作无所谓啦,但是如果想看界面,就不是很适应! 修改方法如下: 1.用root登录系统,密码为创建虚拟机时候的密码.创建虚 ...
- Cs231n-assignment 2作业笔记
assignment 2 assignment2讲解参见: https://blog.csdn.net/BigDataDigest/article/details/79286510 http://ww ...
- RabbitMQ持久化
我们知道,如果消息接收端挂了,消息会保存在队列里.下次接收端启动就会接收到消息. 如果RabbitMQ挂了怎么办呢?这时候需要将消息持久化到硬盘 消息发送端:producer ........... ...
- token
18f9nWvThC274lo3USjgfeldynt0t/r/w0yjLbj9 http://app-static.acc5.com/app/testpost.php