vm.$on( event, callback ):监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$emit( event, […args] ):触发当前实例上的事件。附加参数都会传给监听器回调。
<!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>
新建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事件后运行。
两个浏览器窗口间通信:一个窗口更新localStorage,另一个窗口监听window对象的storage事件来实现通信;所有的WebSocket都监听同一个服务器地址,利用send发送消息,利用onmessage获取消息的变化;借助iframe 或 window.open;HTML5 中的 Web Worker 可以分为两种不同线程类型
在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。
使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。父子组件之间的通信props和$emit 父组件通过props将数据下发给props
前端开发过程中,总是避免不了要进行前端标签页之间的通信,最经典的例子莫过于音乐播放网站中,当第一次点击播放列表中的歌曲时,它会打开一个新的标签页进行播放,而当在列表中再次点击歌曲播放时
我们的项目是基于 ThinkJS + Vue 开发的,最近实现了一个多端实时同步数据的功能,所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node.js 服务端框架
其实服务器的处理和客户端大同小异,分三个逻辑分支:检索成功,用检索到的Socket来处理接收报文;检索失败,服务器侦听(listen)目的端口,创建全新的Socket服务客户;检索失败,服务器没有侦听目的端口,丢弃处理
如何实现两个组件之间的双向传递呢?即,在父组件中修改了值,子组件会立即更新。在子组件中修改了值,父组件中立即更新。vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。
vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。父组件通过$refs调用子组件的方法。 以上就是父子组件通信的方式
在微服务架构的世界中,我们通过一系列服务构建应用。集合中的每项服务都符合以下标准:松散耦合、可维护和可测试、可以独立部署,微服务架构中的每个服务都解决了应用中的业务问题
数据单向流动prop react也是一样prop ; $emit / $on (任意组件间传递)创建个空的组件,来作eventbus 用来触发及监听事件 ;vuex 牛刀集中式存储管理应用的所有组件的状态
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!