美文网首页
weex 自定义组件传值总结

weex 自定义组件传值总结

作者: EmptyWalker | 来源:发表于2016-11-14 17:56 被阅读349次

描述

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

相关文章

  • weex 自定义组件传值总结

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

  • vue2.0组件间传值的方法汇总

    1、组件间的传值 1.1 父组件向子组件传值 子组件自定义一个属性 父组件通过自定义属性绑定值 子组件调用自定义属...

  • 组件之间的通信方法总结

    父向子传 方法总结 在子组件中绑定自定义属性来接收父组件的数据值 在子组件的模板中通过props来接收父组件的传值...

  • 07-组件之间的传值:父组件给子组件传值

    组件之间的传值分为三种传值方式 1.父组件传值给子组件:使用属性传 props['自定义属性名']2.子组件传...

  • 组件间传值

    父子组件传值父传子 // 接收父组件传值 子传父 // 触发一个自定义事件 祖孙组件传值// 添加依赖数据,它里面...

  • (React)组件间传值

    前言 有了自定义组件,当然也会有组件间的传值 一、父组件向子组件传值 父组件向子组件传值的时候,使用属性传递的方式...

  • Vue3——组件传值 & v-model & 异步组件 & te

    一、父子组件传值 父组件通过props向子组件传值,子组件通过emit触发自定义事件传递新值给父组件。props:...

  • Vue组件通信,父传子,子传父

    子组件 父组件 效果 总结 子组件接收父组件传值 (props) 子组件传值給父组件($emit())

  • vue组件的五种传值方法(父子\兄弟\跨组件)

    一、props/$emit父子组件传值: 父传子 (自定义属性 props) 父组件向子组件传参,通过自定义属性的...

  • vue定义组件

    自定义组件 子组件向父组件传值需要通过函数,父组件向子组件传值通过属性 this.$emit当前组件触发一个事件 ...

网友评论

      本文标题:weex 自定义组件传值总结

      本文链接:https://www.haomeiwen.com/subject/prohpttx.html