做前端开发的同学，应该对data属性不陌生，data-* 属性可以在所有的 HTML 元素中嵌入数据。因此，所有主流浏览器都支持data-*属性，各种js框架也必须有它的使用，weex也不例外。

本文适合有点weex基础的人，看开头以为是讲data-*属性？不仅仅，一定要看到最后。

Vue中的自定义属性

同h5使用方式一样，在weex页面中使用data-作为前缀设置属性，data-* 属性由以下两部分组成：

1. 属性名不要包含大写字母，在 data- 后必须至少有一个字符。
2. 该属性可以是任何字符串

以iOS代码为例，我们监听一下WXComponent的setWx_component方法，观察一下设置的data-属性，此处我没有在WeexSDK中检测，而是在load中hook一下WXComponent的setWx_component方法：

+ (void)load {
    [super load];
    
    // 对WEEX组件进行兼容
    NSError *err;
    [UIView aspect_hookSelector:@selector(setWx_component:) withOptions:AspectPositionAfter usingBlock:^(id<AspectInfo> info){
        WXComponent *comp = info.arguments.firstObject;
        if (!comp) return;
        
        NSLog(@"%@", self.attributes);
        
    } error:&err];
    
    if (err) {
        NSLog(@"badge aspect setWx_component >>>>\n%@", err.localizedDescription);
    }
    
}

会发现自定义属性前缀 "data-" 的“-”会被原生代码忽略，变成驼峰命名的属性，如data-badge在原生代码中，获取到的属性名是dataBadge，如下图所示：

手误之后更惊喜的发现：

// vue代码
<div data-badge="8888" extra-data="aaa" mypro="bbb" class="titleDiv">
    <text>这是一段文字说明</text>
</div>

也就是说，vue中的weex开发中，标签除了支持data-属性，还支持其他字符串的自定义属性以及*-*的模式，只是包含-的属性会变成驼峰命名。

Rax中的自定义属性

rax中貌似不支持含有“-”的属性，因此可以直接用正常变量命名的字符串即可：

// rax代码
<View className="border" data1='aaa' bbb="bbb" dataBadge="ccc">
  <Text>这是一段文字</Text>
</View>

因此可以看出，正常变量命名字符串都可以作为自定义属性，注意vue和rax的区别即可。

有了自定义属性，可以方便对weex元素进行监听和操作，是不是很方便呢？

Weex官网和Rax上都找不到相关说明，自己试试才知道哦。

有问题欢迎留言交流。