组件的消息通信

冒泡通信 fire

var ComponentOne = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config);
	},
	afterRender: function () {
		// fire 会将消息发到父组件,以及父组件的父组件......
		this.fire('msgFromOne', 123);
	}
});
var ComponentTwo = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config, {
			view: '<SubComponent></SubComponent>',
			childs: {
				SubComponent: ComponentOne
			}
		});
	},
	// 该消息由 ComponentOne 发出
	// 因为 ComponentTwo 是 ComponentOne 的父组件,所以能接收到冒泡消息
	onMsgFromOne: function (msg) {
		console.log(msg.param); // 123 消息参数
		console.log(msg.type); // 'fire'
		console.log(msg.count); // 1 消息被传递的次数
		console.log(msg.from); // ComponentOne 实例,消息发送源
	}
});
var ComponentThree = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config, {
			view: '<SubComponent></SubComponent>',
			childs: {
				SubComponent: ComponentTwo
			}
		});
	},
	// 该消息由 ComponentOne 发出
	// 因为 ComponentThree 是 ComponentTwo 的父组件,所以也能接收到冒泡消息
	onMsgFromOne: function (msg) {
		console.log(msg.param); // 123 消息参数
		console.log(msg.type); // 'fire'
		console.log(msg.count); // 2 消息被传递的次数
		console.log(msg.from); // ComponentOne 实例,消息发送源
	}
});

广播通信 broadcast

var ComponentOne = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config);
	},
	// 该消息由 ComponentThree 发出
	// 因为 ComponentOne 是 ComponentTwo 的子组件,所以也能接收到广播消息
	onMsgFromThree: function (msg) {
		console.log(msg.param); // 456
		console.log(msg.type); // 'broadcast'
	}
});
var ComponentTwo = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config, {
			view: '<SubComponent></SubComponent>',
			childs: {
				SubComponent: ComponentOne
			}
		});
	},
	// 该消息由 ComponentThree 发出
	// 因为 ComponentTwo 是 ComponentThree 的子组件,所以能接收到广播消息
	onMsgFromThree: function (msg) {
		console.log(msg.param); // 456
	}
});
var ComponentThree = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config, {
			view: '<SubComponent></SubComponent>',
			childs: {
				SubComponent: ComponentTwo
			}
		});
	},
	afterRender: function () {
		// broadcast 会将消息发到所有子组件,以及每个子组件的所有子组件......
		this.broadcast('msgFromThree', 456);
	}
});

一对一通信 notify

var SubComponent = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config);
	},
	// 从 ComponentB 发来的消息
	onMsgToSubComponent: function (msg) {
		console.log(msg.param); // 456
	}
});
var ComponentA = sugar.Component.extend({
	init: function (config) {
		config = this.cover(config, {
			target: document.body,
			view: '<Sub></Sub>',
			childs: {
				Sub: SubComponent
			}
		});
	},
	// 从 ComponentB 发来的消息
	onMsgToComponentA: function (msg) {
		console.log(msg.param); // 123
	}
});
var compA = sugar.core.create('componentA', ComponentA);
var ComponentB = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config);
	},
	afterRender: function () {
		// 与 ComponentA 通信,'componentA' 是组件创建时的名称
		this.notify('componentA', 'msgToComponentA', 123);
		// 也可以传入组件实例进行通信:
		// this.notify(compA, 'msgToComponentA', 123);
		// 与 ComponentA 的子组件 SubComponent 通信
		// 由于是 ComponentA 的子组件,所以需要指定组件的路径层级,用 . 分割
		this.notify('componentA.Sub', 'msgToComponentA', 123);
		// 也可以传实例进行通信:
		// this.notify(compA.getChild('Sub'), 'msgToComponentA', 123);
	}
});

全局广播通信 globalCast

var user = 'Kobe';
sugar.core.globalCast('userLogin', user);
sugar.core.globalCast('userLogout', user);