自定义组件扩展

    为了更好的理解扩展后的效果,先举一个例子:

    通过例子可以发现,自定义组件的扩展其实就是提供了修改自定义组件定义段的能力,上述例子就是修改了自定义组件中的 定义段里的内容。

    以下举个例子来说明:

    上述代码中声明了1个自定义组件和3个 behavior,每个 behavior 都使用了 definitionFilter 定义段。那么按照声明的顺序会有如下事情发生:

    • 当进行 behavior2 的声明时就会调用 behavior3 的 definitionFilter 函数,其中 参数是 behavior2 的定义段, definitionFilterArr 参数即为空数组,因为 behavior3 没有使用其他的 behavior 。
    • 同理,在进行 component 的声明时就会调用 behavior1 的 definitionFilter 函数。简单概括,definitionFilter 函数可以理解为当 A 使用了 B 时,A 声明就会调用 B 的 definitionFilter 函数并传入 A 的定义对象让 B 去过滤。此时如果 B 还使用了 C 和 D ,那么 B 可以自行决定要不要调用 C 和 D 的 definitionFilter 函数去过滤 A 的定义对象。

    代码示例:

    下面利用扩展简单实现自定义组件的计算属性功能:

    在组件中使用:

    实现原理很简单,对已有的 setData 进行二次封装,在每次 setData 的时候计算出 computed 里各字段的值,然后设到 data 中,已达到计算属性的效果。