美文网首页
小程序wepy框架之组件props传值

小程序wepy框架之组件props传值

作者: fewfe | 来源:发表于2017-11-15 10:00 被阅读0次

    通过研究props主要作用是将父组件的值传给子组件,下面是官方文档:

    //父组件中的值title

    <child title="mytitle"></child>

    // 子组件通过父组件的值title传递给props,所以通过this.props.title就能获取到title的值,但es

    6对数据进行了劫持,所以通过this.title就能访问到了

    props = { title: String};

    onLoad () { console.log(this.title); // mytitle}

    下面是实例代码:(panel.wpy)

    .panel {

    width: 100%;

    margin-top: 20rpx;

    text-align: left;

    font-size: 12px;

    padding-top: 20rpx;

    padding-left: 50rpx;

    padding-bottom: 20rpx;

    border: 1px solid #ccc;

    .title {

    padding-bottom: 20rpx;

    font-size: 14px;

    font-weight: bold;

    }

    .info {

    padding: 15rpx;

    }

    .testcounter {

    margin-top: 15rpx;

    position: absolute;

    }

    .counterview {

    margin-left: 120rpx;

    }

    }import wepy from 'wepy'

    export default class Panel extends wepy.component {

    props = {

    abcd:String

    }

    onLoad(){

    console.log(this.abcd)

    }

    }

    (com.wpy)

    import wepy from 'wepy';

    //引入组件文件

    import Panel from '../components/panel';

    export default class Com extends wepy.page {

    //声明组件,分配组件id为child

    components = {

    panel: Panel

    };

    }

    相关文章

      网友评论

          本文标题:小程序wepy框架之组件props传值

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