使用

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

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

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

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

示例

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