小程序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
};
}