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

通过研究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

};

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 4,785评论 1 3
  • 相信做过微信小程序的都知道,官方给出的微信web开发工具上根本就无法加载node_modules包,即使可以加载,...
    萧玄辞阅读 1,464评论 0 2
  • 野草地丁缀日边, 可怜一季势如烟。 天公借我双飞翼, 世外桃源去悟禅。
    素雪妖娆阅读 206评论 0 0
  • 和很多文艺症患者一样,做梦有一天自己开家书店,品书品咖啡,聊书聊生活。结果现实太骨感,确切说是高昂的租金...
    三语石阅读 339评论 0 1
  • 第一,礼物什么时间送最好。 礼物什么时间送最好呢? 和别人送的时间不一样最好。 很多人马上要说了, 都是一样的节日...
    短发髪阅读 771评论 0 0