编译 components 组件，拓展属性的功能

[shenqihui]

假设定义了一个 cropper 的组件。

components 的 template

<template>
  <view class="cropper" bindtap="cropperImageSelectUpload">
    <view class="cropper-transclude">
      <slot></slot>
    </view>
  </view>
</template>

在 pages 里面调用

<cropper data-model="formData.avatar" data-width="180" data-height="180">
  <image src="{{formData.avatar}}" />
</cropper>

目前的编译结果是

<view class="cropper" bindtap="$cropper$cropperImageSelectUpload">
  <view class="cropper-transclude">
    <image src="{{formData.avatar}}" />
  </view>
</view>

---

建议方案：参考 angular 的 directive 方案 （wepy借鉴 vue ，可惜我不熟 vue，所以只能参考 angular ）

xml 调用的时候，增加个标志位，例如 replace="false" ，就进行拓展，（默认这个值为 true ，兼容旧版本的接口），编译的时候，进行属性的枚举，拓展到 components 的最外层元素上。

编写的例子如下：

pages 调用

<cropper class="avatar-cropper" replace="false" data-model="formData.avatar" data-width="180" data-height="180">
  <image src="{{formData.avatar}}" />
</cropper>

编译的结果

<view class="cropper avatar-cropper" replace="false" data-model="formData.avatar" data-width="180" data-height="180" bindtap="$cropper$cropperImageSelectUpload">
  <view class="cropper-transclude">
    <image src="{{formData.avatar}}" />
  </view>
</view>

对 class 属性进行 append 的操作，对其他相同的属性进行了覆盖操作。

[shenqihui]

或者不需要进行标志位 replace 的增加，直接把调用时候的属性增加到编译结果中。

这样做的操作的方便方式就是，在调用 cropper 的时候，能传入赋值的 path ，组件的事件，可以知道该组件在编写时候调用的 dataset 属性。

希望能支持这种写法。

[shenqihui]

如果只能使用 props 的方式，假设定义高度 :width="width" ，就必须在 parent 的 data 中定义高度才行。

如果 attr 继承的方式能够实现，那么使用 component 的时候，就不需要定义那些一次性的 props 到 pages 的 data 中。

应该好一点点吧。

[Gcaufy]

pages:
<cropper theme="avatar-cropper" width="180" height="180">
  <image src="{{formData.avatar}}" />
</cropper>

//cropper.wpy
<view class="cropper {{theme}}" data-width="{{width}}" data-height="{{height}}" bindtap="cropperImageSelectUpload">
    <view class="cropper-transclude">
      <slot></slot>
    </view>
  </view>

应当使用 props 静态传值。而不是所谓的属性继承。 :width="widht" 是指动态传值，子组件获取到父组件的width值 width="180" 是指静态传值，子组件直接拿到180这个值。

[shenqihui]

@Gcaufy 原来能这样子静态传值。

谢谢了。