子组件如何通知父组件？ 编辑本文

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

使用

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.