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