每个 vue 实例都实现了事件接口
vm.$on( event, callback )：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$emit( event, […args] )：触发当前实例上的事件。附加参数都会传给监听器回调。
vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue2-单一事件管理组件通信</title>
<script src="vue.js"></script>
<script type="text/JavaScript">
//准备一个空的实例对象
var Event = new Vue();
//组件A
var A = {
template: `
<div>
<span>我是A组件的数据->{{a}}</span>
<input type="button" value="把A数据传给C" @click = "send">
</div>
`,
methods: {
send () {
Event.$emit("a-msg", this.a);
}
},
data () {
return {
a: "我是a组件中数据"
}
}
};
//组件B
var B = {
template: `
<div>
<span>我是B组件的数据->{{a}}</span>
<input type="button" value="把B数据传给C" @click = "send">
</div>
`,
methods: {
send () {
Event.$emit("b-msg", this.a);
}
},
data () {
return {
a: "我是b组件中数据"
}
}
};
//组件C
var C = {
template: `
<div>
<h3>我是C组件</h3>
<span>接收过来A的数据为: {{a}}</span>
<br>
<span>接收过来B的数据为: {{b}}</span>
</div>
`,
mounted () {
//接收A组件的数据
Event.$on("a-msg", function (a) {
this.a = a;
}.bind(this));
//接收B组件的数据
Event.$on("b-msg", function (a) {
this.b = a;
}.bind(this));
},
data () {
return {
a: "",
b: ""
}
}
};
window.onload = function () {
new Vue({
el: "#box",
components: {
"dom-a": A,
"dom-b": B,
"dom-c": C
}
});
};
</script>
</head>
<body>
<div id="box">
<dom-a></dom-a>
<dom-b></dom-b>
<dom-c></dom-c>
</div>
</body>
</html>Vuejs 用$emit与$on来进行跨页面之间的数据传输通信
新建bus.js
import Vue from 'vue'
export var bus = new Vue()
App.vue里created方法里定义事件
import { bus } from 'bus.js'
// ...
created () {
bus.$on('tip', (text) => {
alert(text)
})
}
Test.vue组件内调用
import { bus } from 'bus.js'
// ...
bus.$emit('tip', '123')备注：on和emit的事件必须是在一个公共的实例上，才能触发。
总结：
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on。
父组件可以使用 props 把数据传给子组件；子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件；vm.$on( event, fn );//监听event事件后运行。
微信小程序8种数据通信的方式
数据通信在开发中是必不可少的一个环节，也是我们必须掌握的知识。知道得越多的数据通信方式，实现业务会更加得心应手，下面我将这些通信方式归类介绍：
vue 数据通信总结
数据单向流动prop react也是一样prop ； $emit / $on （任意组件间传递）创建个空的组件，来作eventbus 用来触发及监听事件 ；vuex 牛刀集中式存储管理应用的所有组件的状态
vue中使用v-model完成组件间的通信
如何实现两个组件之间的双向传递呢？即，在父组件中修改了值，子组件会立即更新。在子组件中修改了值，父组件中立即更新。vue中有一个很神奇的东西叫v-model，它可以完成我们的需求。
React组件通信
这篇文章将还是通过实例的方式记录一下 React 中组件之间的通信方式，在 React 中，需要组件通信的情况一般有以下几种：父组件向子组件通信，子组件向父组件通信，跨级组件通信，非嵌套组件通信
vue父子组件通信高级用法
vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率，减少代码量。但是使用组件最大的难点就是父子组件之间的通信。父组件通过$refs调用子组件的方法。 以上就是父子组件通信的方式
postMessage还能这样玩
在日常工作中，消息通信是一个很常见的场景。比如大家熟悉 B/S 结构，在该结构下，浏览器与服务器之间是基于 HTTP 协议进行消息通信：
前端跨页面通信，你知道哪些方法？
在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。
Vue组件之间通信的七种方式
使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。父子组件之间的通信props和$emit 父组件通过props将数据下发给props
两个浏览器窗口间通信总结
两个浏览器窗口间通信：一个窗口更新localStorage，另一个窗口监听window对象的storage事件来实现通信；所有的WebSocket都监听同一个服务器地址，利用send发送消息，利用onmessage获取消息的变化；借助iframe 或 window.open；HTML5 中的 Web Worker 可以分为两种不同线程类型
Vue3.x 推荐使用 mitt.js
比起 Vue 实例上的 EventBus，mitt.js 好在哪里呢？首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖 Vue 实例，所以可以跨框架使用，React 或者 Vue，甚至 jQuery 项目都能使用同一套库。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!