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

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

//父组件中的值title

// 子组件通过父组件的值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传值)