LOGOSan

动态子组件如何传递消息给父组件?

编辑本文

组件的创建中,可能需要在运行时,通过状态树渲染出一个动态组件树。通常的方法,我们通过 dispatch/message 但是由于父组件及子组件都是单独动态创建的,因此父子组件之间实际上是没有父子关系的,因此需要将子组件的parentComponent指向父组件,以实现动态父子组件之间的消息传递。

example

此处给一个简单的例子,我们需要根据一个简单的状态树实现一个相应的组件样式,并实现父子组件的通信:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const Child = san.defineComponent({
template: `
<div class="child">
{{name}}<button on-click="sendMsg">send msg</button>
</div>
`,
sendMsg() {
this.dispatch('child-msg', this.data.get('msg'));
}
});
const Parent = san.defineComponent({
template: `
<div class="parent" style="border: 1px solid red">
I am parent
<button on-click="addChild">
add child
</button>
{{childMsg}}
</div>`,
addChild() {
const childs = this.data.get('childs');
const parentEl = this.el;
childs.forEach(child => {
let childIns = new Child({
parent: this,
data: child
});
childIns.attach(parentEl);
this.childs.push(childIns);
});
},
messages: {
'child-msg': function(arg) {
this.data.set('childMsg', arg.value);
}
}
});
const parent = new Parent({
data: {
childs: [{
name: 'I am child1',
msg: 'child1 send msg'
}, {
name: 'I am child2',
msg: 'child2 send msg'
}]
}
});
parent.attach(document.body);

实例

See the Pen QMMZPV by zhanfang (@zhanfang) on CodePen.

RESOURCES

教程

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

指南

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

示例

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

组件 API

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

FACILITIES

Router

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

Store

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

Update

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

MaterialUI组件库

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