Vue2--非父子组件通信笔记
2017-05-13 19:21
218 查看
核心要点:
var Event=new Vue();Event.$emit(事件名称, 数据)
Event.$on(事件名称,function(data){
//data
}.bind(this));
示例代码:
参考智能社视频<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
//准备一个空的实例对象
var Event=new Vue();
var A={
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
<br>
<span>接收过来的B的数据为: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A组件的数据
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this));
//接收B组件的数据
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
};
window.onload=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
</script>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
</html>
相关文章推荐
- vue2 父子组件间通信
- Vue笔记2 父子组件的数据通信
- vue.js学习笔记(三)--父子组件通信总结
- vue学习笔记--父子组件通信
- vue中的event bus非父子组件通信
- vuejs父子组件通信的问题
- Android笔记二十八.Service组件入门(二).绑定本地Service并与之通信
- 父子组件通信vue.js
- Vuejs——(10)组件——父子组件通信
- ReactJS学习笔记 父子组件间的通信
- vue如何实现父子组件通信,以及非父子组件通信(待看)
- vue 父子组件通信
- Vue 父子组件、组件间通信
- angular2 父子组件的通信
- Vuejs——(10)组件——父子组件通信
- vue2.0实现父子通信(基于之前我写的复选框组件)
- Vuejs第十篇之vuejs父子组件通信
- Vue.js-----轻量高效的MVVM框架(十、父子组件通信)
- react 父子组件之间的通信和函数调用
- Vuejs——(10)组件——父子组件通信