weex 自定义组件传值总结

2016-11-14  本文已影响349人  EmptyWalker

描述

个人在使用weex实现一个Q&A的界面,将Q和A对应的UI,封装成一个component,q.we文件如下:

<template>
    <div class="wrap">
        <text class="Img">Q</text>
        <text class="content">{{Q}}</text>
    </div>
</template>
<style>
    .wrap{
        height: 100;
        background-color: rgb(249, 249, 249); 
        text-align: center;
    }
    .Img{
        margin-top: 30;
        margin-left: 24;
        width: 40;
        height: 40;
        border-radius: 20;
        background-color: rgb(255, 128, 128);
        padding-top: 6;
        padding-left: 2.5;
        color: white;
    }
    .content{
        font-size: 14;
        color: #1a1a1a;
        line-height: 100;
    }
</style>
<script>
    module.exports = {
        data : {
            Q:'wqeqwdsadas',
            a: ''
        },
        created : function (argument) {
            console.log(this.Q + '=============' + this.a);
        }
    }
</script>

在主界面使用的这个组件如下:

<template>
    <!-- <div style="background-color: red"> -->
        <scroller>
            <div repeat="{{dataList}}" >
                <div flex-direction="row" class="item">
                    <q Q={{Q}} q="1231231"></q>
                    <a A="{{A}}"></a>
                    <text> {{Q}} </text>
                </div>
            </div>
        </scroller>
        
    <!-- </div> -->
</template>
<style>
    .item{
        flex-direction: column;
    }
</style>

<script>
    require("../components/introduction/a.we");
    require("../components/introduction/q.we");
    module.exports = {
        data: {
            dataList : [
                {
                    Q : '合伙人可以查看哪些收益?',
                    A : '您推广的用户成功购买商品(无退款退货和取消订单),您享有商品总额8%返利。您推广的用户邀请其他用户购买商品。'
                },
            ]
        },
        created: function (argument) {
            
        },
        methods: {

        }
    }
</script>

问题

我在运行后,发现我的组件中created方法中this.Q总是打印不出数据,但是在外面的数据源是存在数据,这个问题就带来了,接下来的各种调试。

解决

我在组件中加了一个a参数,并在外面调用的时候,给a="qweqwe"发现,运行时组件中可以打印出数据,然后将参数Q -> q,发现数据可以传递进去了。

总结

发现weex的组件中,不能用大写字母作为参数传值

上一篇 下一篇

猜你喜欢

热点阅读