weex 自定义组件传值总结

描述

个人在使用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的组件中,不能用大写字母作为参数传值

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 124,631评论 18 136
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 5,022评论 0 17
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 8,023评论 6 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 161,686评论 24 692
  • 每个女性都希望为了爱情而结婚,都在等待那个适合自己的人,最可怕还要性格相合。简始终没有等待到她满意的爱情,尽管遇到...
    腊八小姐Ce阅读 111评论 0 0
  • 在你面前的生日蛋糕 还是你的 但要数数几根蜡烛 在你面前的生日蛋糕 大都是你的 但要数数几根蜡烛 在你面前的生日蛋...
    漓溪泠阅读 78评论 0 0
  • Vvviiiiann阅读 106评论 0 0
  • 第一次接触到哲学是在高中,那会儿是政治的必修课(文科理科都得学的)叫做《哲学生活》。这里的哲学是马克思主义哲学,在...
    游耗子阅读 203评论 0 5