Intact v2.2.0 发布

    下面将介绍以下本次发布的几个重要更新，其它更新，请见更新日志:

    $receive事件会在组件 更新 的时候，如果检测到传入变更的新属性值，就会触发。

    在组件的设计过程中，通常会遇到这样的需求：验证传入组件的属性值是否合法，甚至在不合法的情况下纠正它，或者传入的某个值并不会在组件中直接使用，而是映射成组件内部维护的另一个状态值。

    虽然在Intact中，只要通过set方法设置数据触发了变更，就会抛出$change事件。但通过该事件解决上述问题，存在以下问题：

    例如，当我们需要对用户传入的String类型的数字转换为Number类型时，可以如下这么做：

    又例如，对于日期范围选择组件，我们会依次选择开始时间和结束时间，对于v-model双向绑定的选择结果值，我们希望在选择的过程中，将结果置位空，而选择完成后才去设为最终值。此时我们可以将v-model的绑定的属性值value映射成内部维护的_value来达到目的，但是在外部传入的value的确发生变化时，也要同步更新_value。

    1. class Component extends Intact {
    2.     defaults() {
    3.         return {
    4.             value: [],
    5.             _value: [],
    6.         };
    7.     }
    9.     _init() {
    10.         // 初始化时，将value赋给_value
    11.         this.set('_value', this.get('value'));
    12.         this.on('$receive:value', (c, v) => {
    13.             // 接收到外部传入的新值时，同步更新_value
    14.         });
    17.             // 内部_value变化时，去判断是否选择完成，如果没有，则置为空数组
    18.             if (v && v.length === 1) {
    19.                 v = [];
    20.             }
    21.             this.set('value', v);
    22.         });
    23.     }
    25.     ...
    26. }

    如果我们将上面中的$receive替换成$change会发生什么？

    <b:block>语法在组件中的应用

    在之前的版本中，<b:block>只能配合模板继承<t:template>使用，如果你需要往组件中传入子模板，需要通过属性值来传递，这会给复杂模板的传递带来麻烦。现在<b:block>也可以用于在组件中传递子模板，类似于Vue中的slot，不同的是它依然支持parent()调用组件中的默认模板内容。

    例如，定义一个简化的Dialog组件如下

    2. <div class="dialog">
    3.         <div class="header">{this.get('title')}</div>
    4.     </b:header>
    5.     <b:body />
    6. </div>

    上述Dialog组件中，我们在模板中定义了header和body两个block块，其中header定义了默认模板内容<div class="header">{this.get('title')}</div>，而body为空block。下面我们使用该组件，并往特定区域填充内容

    1. import Dialog from './dialog';
    3. <Dialog>
    4.     <b:header>
    5.         {parent()}
    6.         <button class="close">X</button>
    7.     </b:header>
    8.     <b:body>
    9.         Hello Intact!
    10.     </b:body>
    11. </Dialog>

    在往header这个block中填充内容时，我们可以通过parent()方法引用该在组件模板中的默认内容。所以它的渲染结果为：