LOGOSan

子组件与更高层组件如何通信?

编辑本文

使用

子组件通过dispatch方法向组件树上层派发消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
class Son extends san.Component {
static template = `
<div>
<button on-click='onClick'>向上传递</button>
</div>
`;
onClick() {
const value = this.data.get('value');
// 向组件树的上层派发消息
this.dispatch('son-clicked', value);
}
};

消息将沿着组件树向上传递,直到遇到第一个处理该消息的组件,则停止。通过 messages 可以声明组件要处理的消息。messages 是一个对象,key 是消息名称,value 是消息处理的函数,接收一个包含 target(派发消息的组件) 和 value(消息的值) 的参数对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
class GrandParent extends san.Component {
static template = '<div><slot></slot></div>';
// 声明组件要处理的消息
static messages = {
'son-clicked': function (arg) {
// arg.target 可以拿到派发消息的组件
// arg.value 可以拿到派发消息的值
this.data.set('value', arg.value);
}
}
};

示例

See the Pen higher-communication by Swan (@jiangjiu8357) on CodePen.

RESOURCES

教程

教程是入门的捷径,请从这里开始了解San。

指南

我们正在编写指南手册,以指导各种应用场景下怎么使用San。

示例

这里展示了一些简单例子,以及在实际项目如何使用San。

组件 API

当你想不起来组件的接口时,请查阅这里。

FACILITIES

Router

支持hash和html5模式的router,单页或同构的Web应用通常需要它。

Store

应用状态管理套件,其理念是类似flux的单向流。

Update

Immutable的对象更新库,和san-store配合进行应用状态数据更新。

MaterialUI组件库

基于material-design设计规范的组件库