LOGOSan

子组件如何通知父组件?

编辑本文

San的组件体系提供了事件功能,子组件可以通过调用组件的fire方法派发一个自定义事件,父组件在视图模板中通过on-事件名的方式或通过子组件实例的on方法就可以监听子组件派发的自定义事件,实现子组件到父组件的通信。

使用

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
var childComponent = san.defineComponent({
  template: `
<div>
          <button on-click="onClick">change</button>
</div>
`,
onClick: function () {
       // 向父组件派发一个child-change事件
      this.fire('child-change', 'from child');
}
});
var parentComponent = san.defineComponent({
components: {
'my-child': 'childComponent'
},
template: `
<div>
        <my-child on-child-change="changeHandler($event)"/>
</div>
`,
changeHandler: function (val) {
       // 事件处理
}
});

说明: 我们知道使用「双向绑定」可以将子组件内部的数据变化同步给父组件,但除了类表单组件外,其它情况不建议使用「双向绑定」的方式来达到通知父组件的目的。

示例

See the Pen child-to-parent by funa (@naatgit) on CodePen.

RESOURCES

教程

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

指南

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

示例

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

组件 API

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

FACILITIES

Router

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

Store

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

Update

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

MaterialUI组件库

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